Merge pull request #816 from fin-hypergrid/develop

3.3.2
fin-hypergrid · Nov 25, 2019 · 902a52e · 902a52e
2 parents 4eba8c3 + 1ee24aa
commit 902a52e
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 106 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ It also highlights a DOM-based custom external editor triggered via hypergrid ev
 <img src="images/README/gridshot04.gif">
 
 ## Table of Contents
-* [Current Release](#current-release-302---25-September-2018)
+* [Current Release](#current-release)
 * [Distribution](#distribution)
 * [Demos](#demos)
 * [Features](#features)
@@ -15,28 +15,25 @@ It also highlights a DOM-based custom external editor triggered via hypergrid ev
 * [Roadmap](#roadmap)
 * [Contributing](#contributors)
 
-### Current Release (3.2.1 - 2 May 2019)
+### Current Release
 
-> **CAUTION:** For those considering upgrading directly from v2, be advised Hypergrid v3 introduced a revised data model _with breaking changes._ The impact of these changes has been intentionally minimized and should not affect the vast majority of users. See the [v3.0.0 release notes](https://github.com/fin-hypergrid/core/releases/tag/v3.0.0) for more information.
-
-_For a complete list of changes, see the [release notes](https://github.com/fin-hypergrid/core/releases)._
+**v3.3.2**
+25 November 2019
 
 ### Distribution
 
 #### npm module _(recommended)_
-Published as a CommonJS module to npmjs.org.
-Specify a <a href="https://semver.org/">SEMVER</a> of `"fin-hypergrid": "3.2.1"` (or `"^3.2.1"`) in your package.json file,
+Published as a CommonJS module to [**npm**](http://npmjs.com/package/fin-hypergrid).
+Specify a <a href="https://semver.org/">SEMVER</a> of `"fin-hypergrid": "3.3.2"` (or `"^3.3.2"`) in your package.json file,
 issue the `npm install` command, and let your bundler (<a target="webpack" href="https://webpack.js.org/">wepback</a>,
 <a target="browserify" href="http://browserify.org/">Browserify</a>) create a single file containing both Hypergrid and your application.
 
-#### Build files _(for small and informal examples and proofs-of-concept)_
-Also published as pre-bundled build files (`fin-hypergrid.js` and `fin-hypergrid.min.js`) to the GitHub CDN.
-See the [CDN index](https://fin-hypergrid.github.io#index) for links.
+#### Build files
+For small and informal examples and proofs-of-concept, load a pre-bundled build file (`fin-hypergrid.js` or `fin-hypergrid.min.js`) from the GitHub CDN. See the [CDN index](https://fin-hypergrid.github.io#index) for links.
+
+Your application can load one of these pre-bundled build files (in a `<script>` tag), which creates the global namespace `window.fin` (as needed) and populates it with `window.fin.Hypergrid`.
 
-Contains a JavaScript [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
-that creates (as needed) the global namespace `window.fin` and populates `window.fin.Hypergrid`.
-Your application would load one of these pre-bundled build files (in a `<script>` tag),
-plus each of its own modules (or a single bundled build of all of its own its own modules).
+As of v3.2.1, the same build files are also available in a `umd` folder on npm for distribution via the [**unpkg**](https://unpkg.com/) CDN which processes SEMVER semantics when provided. For example, `<script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script>` loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern `^3.2` (aka 3.*.*).
 
 ### Demos
 
@@ -99,7 +96,7 @@ Hypergrid global configurations can be found [here](https://fin-hypergrid.github
 
 ### Roadmap
 
-For our current queue of up coming work you can find it [here](ROADMAP.md)
+For our current queue of upcoming work you can find it [here](ROADMAP.md)
 
 ### Contributors
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fin-hypergrid",
-  "version": "3.2.2",
+  "version": "3.3.2",
   "description": "Canvas-based high-performance grid",
   "main": "src/Hypergrid",
   "repository": {

diff --git a/src/Hypergrid/index.js b/src/Hypergrid/index.js
@@ -238,6 +238,15 @@ var Hypergrid = Base.extend('Hypergrid', {
      */
     isWebkit: true,
 
+    /**
+     * We still support IE 11; we do NOT support older versions of IE.
+     * (We do NOT officially support Edge.)
+     * @see https://stackoverflow.com/questions/21825157/internet-explorer-11-detection#answer-21825207
+     * @type {boolean}
+     * @memberOf Hypergrid#
+     */
+    isIE11: !!(window.MSInputMethodContext && document.documentMode),
+
     /**
      * The pixel location of an initial mousedown click, either for editing a cell or for dragging a selection.
      * @type {Point}
@@ -1482,19 +1491,8 @@ var Hypergrid = Base.extend('Hypergrid', {
      * @memberOf Hypergrid#
      * @returns {number} The HiDPI ratio.
      */
-    getHiDPI: function(ctx) {
-        if (window.devicePixelRatio && this.properties.useHiDPI) {
-            var devicePixelRatio = window.devicePixelRatio || 1,
-                backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
-                    ctx.mozBackingStorePixelRatio ||
-                    ctx.msBackingStorePixelRatio ||
-                    ctx.oBackingStorePixelRatio ||
-                    ctx.backingStorePixelRatio || 1,
-                result = devicePixelRatio / backingStoreRatio;
-        } else {
-            result = 1;
-        }
-        return result;
+    getHiDPI: function() {
+        return this.canvas.devicePixelRatio;
     },
 
     /**
@@ -1570,6 +1568,31 @@ var Hypergrid = Base.extend('Hypergrid', {
         this.computeCellsBounds();
     },
 
+    /**
+     * @memberOf Hypergrid#
+     * @desc Reset zoom factor used by mouse tracking and placement
+     * of cell editors on top of canvas.
+     *
+     * Call this after resetting `document.body.style.zoom`.
+     * (Do not set `zoom` style on canvas or any other ancestor thereof.)
+     *
+     * **NOTE THE FOLLOWING:**
+     * 1. `zoom` is non-standard (unsupported by FireFox)
+     * 2. The alternative suggested on MDN, `transform`, is ignored
+     * here as it is not a practical replacement for `zoom`.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
+     *
+     * @todo Scrollbars need to be repositioned when `canvas.style.zoom` !== 1. (May need update to finbars.)
+     */
+    resetZoom: function() {
+        this.abortEditing();
+        this.canvas.resetZoom();
+    },
+
+    getBodyZoomFactor: function() {
+        return this.canvas.bodyZoomFactor;
+    },
+
     /**
      * @memberOf Hypergrid#
      * @desc Enable/disable if this component can receive the focus.

diff --git a/src/defaults.js b/src/defaults.js
@@ -816,16 +816,6 @@ var defaults = {
      */
     repaintImmediately: false,
 
-    //enable or disable double buffering
-
-    /**
-     * @default
-     * @type {boolean}
-     * @memberOf module:defaults
-     */
-    useBitBlit: false,
-
-
     /**
      * @default
      * @type {boolean}

diff --git a/src/features/ColumnMoving.js b/src/features/ColumnMoving.js
@@ -18,6 +18,15 @@ var draggerCTX;
 var floatColumn;
 var floatColumnCTX;
 
+function translate(grid, x, y) {
+    if (grid.isIE11) {
+        var zoomFactor = grid.getBodyZoomFactor();
+        x *= zoomFactor;
+        y *= zoomFactor;
+    }
+    return 'translate(' + x + 'px, ' + y + 'px)';
+}
+
 /**
  * @constructor
  * @extends Feature
@@ -297,14 +306,14 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
         return function() {
             var d = floatColumn;
             d.style.display = 'inline';
-            self.setCrossBrowserProperty(d, 'transform', 'translate(' + floaterStartX + 'px, ' + 0 + 'px)');
+            self.setCrossBrowserProperty(d, 'transform', translate(grid, floaterStartX, 0));
 
             //d.style.webkit-webkit-Transform = 'translate(' + floaterStartX + 'px, ' + 0 + 'px)';
             //d.style.webkit-webkit-Transform = 'translate(' + floaterStartX + 'px, ' + 0 + 'px)';
 
             requestAnimationFrame(function() {
                 self.setCrossBrowserProperty(d, 'transition', (self.isWebkit ? '-webkit-' : '') + 'transform ' + columnAnimationTime + 'ms ease');
-                self.setCrossBrowserProperty(d, 'transform', 'translate(' + draggerStartX + 'px, ' + -2 + 'px)');
+                self.setCrossBrowserProperty(d, 'transform', translate(grid, draggerStartX, -2));
             });
             grid.repaint();
             //need to change this to key frames
@@ -353,21 +362,24 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
         }
 
         var columnWidth = grid.getColumnWidth(columnIndex);
-        var colHeight = grid.div.clientHeight;
+        var colHeight = grid.canvas.canvas.clientHeight;
         var d = floatColumn;
         var style = d.style;
         var location = grid.div.getBoundingClientRect();
 
         style.top = (location.top - 2) + 'px';
         style.left = location.left + 'px';
 
-        var hdpiRatio = grid.getHiDPI(floatColumnCTX);
+        var hdpiRatio = grid.getHiDPI();
 
-        d.setAttribute('width', Math.round(columnWidth * hdpiRatio) + 'px');
-        d.setAttribute('height', Math.round(colHeight * hdpiRatio) + 'px');
+        d.setAttribute('width', Math.round(columnWidth * hdpiRatio));
+        d.setAttribute('height', Math.round(colHeight * hdpiRatio));
         style.boxShadow = '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)';
-        style.width = columnWidth + 'px'; //Math.round(columnWidth / hdpiRatio) + 'px';
-        style.height = colHeight + 'px'; //Math.round(colHeight / hdpiRatio) + 'px';
+
+        var zoomFactor = grid.isIE11 ? grid.getBodyZoomFactor() : 1;
+        style.width = columnWidth * zoomFactor + 'px'; //Math.round(columnWidth / hdpiRatio) + 'px';
+        style.height = colHeight * zoomFactor + 'px'; //Math.round(colHeight / hdpiRatio) + 'px';
+
         style.borderTop = '1px solid ' + grid.properties.lineColor;
         style.backgroundColor = grid.properties.backgroundColor;
 
@@ -385,7 +397,7 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
         };
 
         style.zIndex = '4';
-        this.setCrossBrowserProperty(d, 'transform', 'translate(' + startX + 'px, ' + -2 + 'px)');
+        this.setCrossBrowserProperty(d, 'transform', translate(grid, startX, -2));
         GRABBING.forEach(setName, style);
         grid.repaint();
     },
@@ -435,9 +447,9 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
             scrollLeft = 0;
         }
 
-        var hdpiRatio = grid.getHiDPI(draggerCTX);
+        var hdpiRatio = grid.getHiDPI();
         var columnWidth = grid.getColumnWidth(columnIndex);
-        var colHeight = grid.div.clientHeight;
+        var colHeight = grid.canvas.canvas.clientHeight;
         var d = dragger;
         var location = grid.div.getBoundingClientRect();
         var style = d.style;
@@ -450,11 +462,12 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
         style.borderTop = '1px solid ' + grid.properties.lineColor;
         style.backgroundColor = grid.properties.backgroundColor;
 
-        d.setAttribute('width', Math.round(columnWidth * hdpiRatio) + 'px');
-        d.setAttribute('height', Math.round(colHeight * hdpiRatio) + 'px');
+        d.setAttribute('width', Math.round(columnWidth * hdpiRatio));
+        d.setAttribute('height', Math.round(colHeight * hdpiRatio));
 
-        style.width = columnWidth + 'px'; //Math.round(columnWidth / hdpiRatio) + 'px';
-        style.height = colHeight + 'px'; //Math.round(colHeight / hdpiRatio) + 'px';
+        var zoomFactor = grid.isIE11 ? grid.getBodyZoomFactor() : 1;
+        style.width = columnWidth * zoomFactor + 'px'; //Math.round(columnWidth / hdpiRatio) + 'px';
+        style.height = colHeight * zoomFactor + 'px'; //Math.round(colHeight / hdpiRatio) + 'px';
 
         var startX = grid.renderer.visibleColumns[columnIndex - scrollLeft].left * hdpiRatio;
 
@@ -470,7 +483,7 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
             hdpiratio: hdpiRatio
         };
 
-        this.setCrossBrowserProperty(d, 'transform', 'translate(' + x + 'px, -5px)');
+        this.setCrossBrowserProperty(d, 'transform', translate(grid, x, -5));
         style.zIndex = '5';
         GRABBING.forEach(setName, style);
         grid.repaint();
@@ -489,7 +502,7 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
 
         var autoScrollingNow = this.columnDragAutoScrollingRight || this.columnDragAutoScrollingLeft;
 
-        var hdpiRatio = grid.getHiDPI(draggerCTX);
+        var hdpiRatio = grid.getHiDPI();
 
         var dragColumnIndex = grid.renderOverridesCache.dragger.columnIndex;
 
@@ -508,7 +521,7 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
 
         this.setCrossBrowserProperty(d, 'transition', (self.isWebkit ? '-webkit-' : '') + 'transform ' + 0 + 'ms ease, box-shadow ' + columnAnimationTime + 'ms ease');
 
-        this.setCrossBrowserProperty(d, 'transform', 'translate(' + x + 'px, ' + -10 + 'px)');
+        this.setCrossBrowserProperty(d, 'transform', translate(grid, x, -10));
         requestAnimationFrame(function() {
             d.style.display = 'inline';
         });
@@ -639,7 +652,7 @@ var ColumnMoving = Feature.extend('ColumnMoving', {
         var d = dragger;
         var changed = grid.renderOverridesCache.dragger.startIndex !== grid.renderOverridesCache.dragger.columnIndex;
         self.setCrossBrowserProperty(d, 'transition', (self.isWebkit ? '-webkit-' : '') + 'transform ' + columnAnimationTime + 'ms ease, box-shadow ' + columnAnimationTime + 'ms ease');
-        self.setCrossBrowserProperty(d, 'transform', 'translate(' + startX + 'px, ' + -1 + 'px)');
+        self.setCrossBrowserProperty(d, 'transform', translate(grid, startX, -1));
         d.style.boxShadow = '0px 0px 0px #888888';
 
         setTimeout(function() {