fixed row header auto size. Fixed context menu off window. Fixed scro…

…ll height too high behavior. Added header cap to the end of the header row (for real this time).
TonyGermaneri · Jan 17, 2017 · e9bb927 · e9bb927
1 parent 4ffd635
commit e9bb927
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "canvas-datagrid",
   "main": "lib/main.js",
-  "version": "0.9.26",
+  "version": "0.9.27",
   "ignore": [
     "**/.*",
     "node_modules",

diff --git a/lib/main.js b/lib/main.js
@@ -84,6 +84,7 @@
                 ['contextMenuMarginTop', 0],
                 ['contextMenuMarginLeft', 5],
                 ['autosizePadding', 5],
+                ['autosizeHeaderCellPadding', 8],
                 ['minHeight', 24],
                 ['minRowHeight', 10],
                 ['minColumnWidth', 10],
@@ -428,6 +429,7 @@
             if (name === 'cornerCell') {
                 ctx.font = style.rowHeaderCellFont;
                 return ctx.measureText((data.length + (attributes.showNewRow ? 1 : 0)).toString()).width
+                    + style.autosizePadding + style.autosizeHeaderCellPadding
                     + style.rowHeaderCellPaddingRight
                     + style.rowHeaderCellPaddingLeft
                     + (attributes.tree ? style.treeArrowWidth
@@ -661,6 +663,13 @@
                         treeArrowSize = 0,
                         cellWidth = sizes.columns[cellStyle  === 'rowHeaderCell'
                             ? 'cornerCell' : header[uniqueId]] || header.width;
+                    if (cellStyle === 'headerCellCap') {
+                        cellWidth = w - x;
+                    }
+                    // if no data or schema are defined, a width is provided to the stub column
+                    if (cellWidth === undefined) {
+                        cellWidth = style.columnWidth;
+                    }
                     if (x + cellWidth + borderWidth < 0) {
                         x += cellWidth + borderWidth;
                     }
@@ -911,7 +920,7 @@
                     c = {
                         name: '',
                         width: w - x,
-                        style: 'headerCell',
+                        style: 'headerCellCap',
                         type: 'string',
                         index: s.length
                     };
@@ -989,7 +998,8 @@
             scrollBox.height = height - headerCellHeight - headerCellBorder;
             scrollBox.top = headerCellHeight + headerCellBorder;
             scrollBox.left = headerCellWidth;
-            scrollBox.scrollHeight = scrollHeight - headerCellBorder + getHeaderCellHeight() + style.scrollBarWidth;
+            scrollBox.scrollHeight = scrollHeight - headerCellBorder
+                + getHeaderCellHeight() + style.scrollBarWidth - (height * 0.5);
             scrollBox.scrollWidth = scrollWidth - style.scrollBarWidth
                 + getHeaderCellWidth() + (style.scrollBarWidth * 2) - width;
             scrollBox.scrollBarHeight = 15;
@@ -1286,7 +1296,7 @@
                 resizeItem = o;
                 resizeMode = o.context;
                 canvas.style.cursor = o.context;
-                if (o.context === 'cell') {
+                if (o.context === 'cell' && o.data) {
                     canvas.style.cursor = 'pointer';
                     hovers[o.data[uniqueId]] = [o.index];
                 }
@@ -1393,6 +1403,7 @@
                     x: e.clientX - position(canvas).left,
                     y: e.clientY - position(canvas).top
                 },
+                loc = {},
                 contextObject = getCellAt(pos.x, pos.y),
                 filterContainer,
                 filterLabel,
@@ -1414,8 +1425,6 @@
             contextMenu.style.cursor = 'pointer';
             contextMenu.style.position = 'absolute';
             contextMenu.style.zIndex = '3';
-            contextMenu.style.top = e.clientY - style.contextMenuMarginTop + 'px';
-            contextMenu.style.left = e.clientX - style.contextMenuMarginLeft + 'px';
             filterInput.value = filterValue || '';
             menuItems = [];
             if (attributes.showFilter) {
@@ -1511,6 +1520,16 @@
             });
             document.body.addEventListener('click', disposeContextMenu);
             document.body.appendChild(contextMenu);
+            loc.x = e.clientX - style.contextMenuMarginLeft;
+            loc.y = e.clientY - style.contextMenuMarginTop;
+            if (loc.x + contextMenu.offsetWidth > document.documentElement.clientWidth) {
+                loc.x = document.documentElement.clientWidth - contextMenu.offsetWidth;
+            }
+            if (loc.y + contextMenu.offsetHeight > document.documentElement.clientHeight) {
+                loc.y = document.documentElement.clientHeight - contextMenu.offsetHeight;
+            }
+            contextMenu.style.left = loc.x + 'px';
+            contextMenu.style.top = loc.y + 'px';
             e.preventDefault();
         }
         function getSelectionBounds() {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.9.26",
+  "version": "0.9.27",
   "description": "Canvas based data grid",
   "main": "./lib/main.js",
   "scripts": {