Merge pull request #813 from fin-hypergrid/develop

3.2.2

css/grid.css

@@ -32,4 +32,6 @@
     outline: 0;
 }
 
-
+.hypergrid {
+    touch-action: none;
+}

css/index.js

@@ -1,39 +1,41 @@
 'use strict';
 
 exports.grid = [
-'.hypergrid-container {',
-'	position: relative;',
-'	height: 500px;',
-'}',
-'.hypergrid-container > div:first-child {',
-'	position: absolute;',
-'	left: 0;',
-'	top: 0;',
-'	right: 0;',
-'	bottom: 0;',
-'}',
-'.hypergrid-container > div:first-child > div.info {',
-'	position: absolute;',
-'	display: none; /* initially hidden */',
-'	margin-top: 150px; /* to place below headers */',
-'	color: #eee;',
-'	text-shadow: 1px 1px #ccc;',
-'	font-size: 36pt;',
-'	font-weight: bold;',
-'	text-align: center;',
-'	top: 0; right: 0; bottom: 0; left: 0;',
-'}',
-'.hypergrid-textfield {',
-'	position: absolute;',
-'	font-size: 12px;',
-'	color: black;',
-'	background-color: ivory;',
-'	box-sizing: border-box;',
-'	margin: 0;',
-'	padding: 0 5px;',
-'	border: 0; /*border: 1px solid #777;*/',
-'	outline: 0;',
-'}',
-'',
-''
+    '.hypergrid-container {',
+    '	position: relative;',
+    '	height: 500px;',
+    '}',
+    '.hypergrid-container > div:first-child {',
+    '	position: absolute;',
+    '	left: 0;',
+    '	top: 0;',
+    '	right: 0;',
+    '	bottom: 0;',
+    '}',
+    '.hypergrid-container > div:first-child > div.info {',
+    '	position: absolute;',
+    '	display: none; /* initially hidden */',
+    '	margin-top: 150px; /* to place below headers */',
+    '	color: #eee;',
+    '	text-shadow: 1px 1px #ccc;',
+    '	font-size: 36pt;',
+    '	font-weight: bold;',
+    '	text-align: center;',
+    '	top: 0; right: 0; bottom: 0; left: 0;',
+    '}',
+    '.hypergrid-textfield {',
+    '	position: absolute;',
+    '	font-size: 12px;',
+    '	color: black;',
+    '	background-color: ivory;',
+    '	box-sizing: border-box;',
+    '	margin: 0;',
+    '	padding: 0 5px;',
+    '	border: 0; /*border: 1px solid #777;*/',
+    '	outline: 0;',
+    '}',
+    '',
+    '.hypergrid {',
+    '	touch-action: none;',
+    '}'
 ].join('\n');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fin-hypergrid",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Canvas-based high-performance grid",
   "main": "src/Hypergrid",
   "repository": {

src/Hypergrid/events.js

@@ -369,6 +369,36 @@ exports.mixin = {
         return dispatchGridEvent.call(this, 'fin-grid-resized', e);
     },
 
+    /**
+     * @memberOf Hypergrid#
+     * @desc Synthesize and fire a `fin-touchstart` event.
+     * @param {CustomEvent} e - The canvas event.
+     * @returns {boolean} Proceed; event was not [canceled](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent#Return_Value `EventTarget.dispatchEvent`).
+     */
+    fireSyntheticTouchStartEvent: function(e) {
+        return dispatchGridEvent.call(this, 'fin-touchstart', e);
+    },
+
+    /**
+     * @memberOf Hypergrid#
+     * @desc Synthesize and fire a `fin-touchmove` event.
+     * @param {CustomEvent} e - The canvas event.
+     * @returns {boolean} Proceed; event was not [canceled](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent#Return_Value `EventTarget.dispatchEvent`).
+     */
+    fireSyntheticTouchMoveEvent: function(e) {
+        return dispatchGridEvent.call(this, 'fin-touchmove', e);
+    },
+
+    /**
+     * @memberOf Hypergrid#
+     * @desc Synthesize and fire a `fin-touchend` event.
+     * @param {CustomEvent} e - The canvas event.
+     * @returns {boolean} Proceed; event was not [canceled](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent#Return_Value `EventTarget.dispatchEvent`).
+     */
+    fireSyntheticTouchEndEvent: function(e) {
+        return dispatchGridEvent.call(this, 'fin-touchend', e);
+    },
+
     /**
      * @memberOf Hypergrid#
      * @desc Synthesize and fire a scroll event.
@@ -599,6 +629,21 @@ exports.mixin = {
             });
         });
 
+        this.addInternalEventListener('fin-canvas-touchstart', function(e) {
+            grid.delegateTouchStart(e);
+            grid.fireSyntheticTouchStartEvent(e);
+        });
+
+        this.addInternalEventListener('fin-canvas-touchmove', function(e) {
+            grid.delegateTouchMove(e);
+            grid.fireSyntheticTouchMoveEvent(e);
+        });
+
+        this.addInternalEventListener('fin-canvas-touchend', function(e) {
+            grid.delegateTouchEnd(e);
+            grid.fireSyntheticTouchEndEvent(e);
+        });
+
         //Register a listener for the copy event so we can copy our selected region to the pastebuffer if conditions are right.
         document.body.addEventListener('copy', function(evt) {
             grid.checkClipboardCopy(evt);
@@ -705,4 +750,31 @@ exports.mixin = {
     delegateKeyUp: function(event) {
         this.behavior.onKeyUp(this, event);
     },
+
+    /**
+     * @memberOf Hypergrid#
+     * @desc Delegate touchstart to the Behavior model.
+     * @param {CustomEvent} event - The pertinent event.
+     */
+    delegateTouchStart: function(event) {
+        this.behavior.onTouchStart(this, event);
+    },
+
+    /**
+     * @memberOf Hypergrid#
+     * @desc Delegate touchmove to the Behavior model.
+     * @param {CustomEvent} event - The pertinent event.
+     */
+    delegateTouchMove: function(event) {
+        this.behavior.onTouchMove(this, event);
+    },
+
+    /**
+     * @memberOf Hypergrid#
+     * @desc Delegate touchend to the Behavior model.
+     * @param {CustomEvent} event - The pertinent event.
+     */
+    delegateTouchEnd: function(event) {
+        this.behavior.onTouchEnd(this, event);
+    }
 };

src/Hypergrid/index.js

@@ -195,8 +195,13 @@ var Hypergrid = Base.extend('Hypergrid', {
         while (div.hasChildNodes()) { div.removeChild(div.firstChild); }
 
         Hypergrid.grids.splice(Hypergrid.grids.indexOf(this), 1);
-    },
 
+        delete this.div;
+        delete this.canvas.div;
+        delete this.canvas.canvas;
+        delete this.sbVScroller;
+        delete this.sbHScroller;
+    },
 
     resetGridBorder: function(edge) {
         edge = edge || '';

src/behaviors/Behavior.js

@@ -805,6 +805,42 @@ var Behavior = Base.extend('Behavior', {
         }
     },
 
+    /**
+     * @memberOf Behavior#
+     * @desc Delegate handling touchstart to the feature chain of responsibility.
+     * @param {Hypergrid} grid The grid instance.
+     * @param {Object} event - The event details.
+     */
+    onTouchStart: function(grid, event) {
+        if (this.featureChain) {
+            this.featureChain.handleTouchStart(grid, event);
+        }
+    },
+
+    /**
+     * @memberOf Behavior#
+     * @desc Delegate handling touchmove to the feature chain of responsibility.
+     * @param {Hypergrid} grid The grid instance.
+     * @param {Object} event - The event details.
+     */
+    onTouchMove: function(grid, event) {
+        if (this.featureChain) {
+            this.featureChain.handleTouchMove(grid, event);
+        }
+    },
+
+    /**
+     * @memberOf Behavior#
+     * @desc Delegate handling touchend to the feature chain of responsibility.
+     * @param {Hypergrid} grid The grid instance.
+     * @param {Object} event - The event details.
+     */
+    onTouchEnd: function(grid, event) {
+        if (this.featureChain) {
+            this.featureChain.handleTouchEnd(grid, event);
+        }
+    },
+
     /**
      * @memberOf Behavior#
      * @desc I've been notified that the behavior has changed.

src/behaviors/Column.js

@@ -136,7 +136,6 @@ Column.prototype = {
      */
     set header(header) {
         this.schema.header = header;
-        this.behavior.grid.repaint();
     },
     get header() {
         return this.schema.header;

src/defaults.js

@@ -1501,7 +1501,8 @@ var defaults = {
         'columnsorting',
         'cellclick',
         'cellediting',
-        'onhover'
+        'onhover',
+        'touchscrolling'
     ],
 
     /** @summary Restore row selections across data transformations (`reindex` calls).

src/features/Feature.js

@@ -231,6 +231,45 @@ var Feature = Base.extend('Feature', {
         }
     },
 
+    /**
+     * @memberOf Feature.prototype
+     * @param {Hypergrid} grid The grid instance.
+     * @param {Object} event - The event details.
+     * @private
+     * @comment Not really private but was cluttering up all the feature doc pages.
+     */
+    handleTouchStart: function(grid, event) {
+        if (this.next) {
+            this.next.handleTouchStart(grid, event);
+        }
+    },
+
+    /**
+     * @memberOf Feature.prototype
+     * @param {Hypergrid} grid The grid instance.
+     * @param {Object} event - The event details.
+     * @private
+     * @comment Not really private but was cluttering up all the feature doc pages.
+     */
+    handleTouchMove: function(grid, event) {
+        if (this.next) {
+            this.next.handleTouchMove(grid, event);
+        }
+    },
+
+    /**
+     * @memberOf Feature.prototype
+     * @param {Hypergrid} grid The grid instance.
+     * @param {Object} event - The event details.
+     * @private
+     * @comment Not really private but was cluttering up all the feature doc pages.
+     */
+    handleTouchEnd: function(grid, event) {
+        if (this.next) {
+            this.next.handleTouchEnd(grid, event);
+        }
+    },
+
     /**
      * @memberOf Feature.prototype
      * @desc toggle the column picker