From f19749faf69a16f49f369d93163f52faa9eede3a Mon Sep 17 00:00:00 2001 From: steve wirts Date: Fri, 2 Oct 2015 15:23:48 -0400 Subject: [PATCH 1/8] lotsa reworking of column ordering stuff --- examples/bclys/fin-hypergrid.min.html | 8 ++--- examples/bclys/index.html | 49 +++++++++++---------------- 2 files changed, 23 insertions(+), 34 deletions(-) diff --git a/examples/bclys/fin-hypergrid.min.html b/examples/bclys/fin-hypergrid.min.html index 01899291d..f914d3426 100644 --- a/examples/bclys/fin-hypergrid.min.html +++ b/examples/bclys/fin-hypergrid.min.html @@ -14,7 +14,7 @@ @group OpenFin hypergrid @element fin-hypergrid @homepage http://github.com/openfin/fin-hypergrid ---> \ No newline at end of file +
  • \ No newline at end of file diff --git a/examples/bclys/index.html b/examples/bclys/index.html index 8cd682266..0267b21a0 100644 --- a/examples/bclys/index.html +++ b/examples/bclys/index.html @@ -11,7 +11,7 @@ - + \ No newline at end of file diff --git a/examples/bclys/index.html b/examples/bclys/index.html index 4b46a33e9..3c6dc7853 100644 --- a/examples/bclys/index.html +++ b/examples/bclys/index.html @@ -10,7 +10,7 @@ - + \ No newline at end of file +
  • \ No newline at end of file diff --git a/examples/bclys/index.html b/examples/bclys/index.html index 3c6dc7853..babef4254 100644 --- a/examples/bclys/index.html +++ b/examples/bclys/index.html @@ -173,6 +173,16 @@ var x = config.x; var y = config.y; + var upDownIMG = upDown; + var upDownSpinIMG = upDownSpin; + var downArrowIMG = downArrow; + + if (!jsonGrid.isEditable()) { + upDownIMG = null; + upDownSpinIMG = null; + downArrowIMG = null; + } + config.halign = 'left'; if ((y % 3) === 0){ config.backgroundColor = '#E87200'; @@ -183,16 +193,16 @@ } if ([0,1,4,5].indexOf(x) > -1) { //we are a dropdown, lets provide a visual queue - config.value = [null, config.value, upDown]; + config.value = [null, config.value, upDownIMG]; } if (x === 1) { renderer = cellProvider.cellCache.linkCellRenderer; } else if (x === 2) { config.halign = 'left'; - config.value = [null, config.value, upDownSpin]; + config.value = [null, config.value, upDownSpinIMG]; } else if (x === 3) { config.halign = 'left'; - config.value = [null, config.value, downArrow]; + config.value = [null, config.value, downArrowIMG]; } else if (x === 6) { renderer = cellProvider.cellCache.buttonRenderer; } else if (x === 7) { @@ -214,7 +224,7 @@ }; //lets override the cell editors, and configure the drop down lists - jsonModel.getDataModel().getCellEditorAt = function(x, y) { + var myCellEditors = function(x, y) { var type = editorTypes[x]; if (!type) { return; //no editor here @@ -247,26 +257,35 @@ return cellEditor; }; - jsonModel.getCursorAt = function(x,y) { - if (x === 1) { - return 'pointer' - } else { - return null; - } - }; + jsonModel.getDataModel().getCellEditorAt = myCellEditors; + + // jsonModel.getCursorAt = function(x,y) { + // if (x === 1) { + // return 'pointer' + // } else { + // return null; + // } + // }; jsonGrid.addFinEventListener('fin-selection-changed', function(e){ - console.log('fin-selection-changed', jsonGrid.getSelectedRows(), jsonGrid.getSelectedColumns(), jsonGrid.getSelections()); - var rowcontext = e.detail.rowContext; - var fields = jsonModel.getFields(); + + //lets mirror the cell selection into the rows and or columns + jsonGrid.selectRowsFromCells(); + //jsonGrid.selectColumnsFromCells(); + + console.log('fin-selection-changed',{yOffset: jsonModel.getHeaderRowCount()}, jsonGrid.getSelectedRows(), jsonGrid.getSelectedColumns(), jsonGrid.getSelections()); + if (e.detail.selections.length === 0) { console.log('no selections'); return; } - for (var i = 0; i < fields.length; i++) { - var field = fields[i]; - console.log(i + ' ' + field + ' = ' + rowcontext(i) + ', ' + rowcontext(field)); - } + + // var fields = jsonModel.getFields(); + // var rowcontext = e.detail.rowContext; + // for (var i = 0; i < fields.length; i++) { + // var field = fields[i]; + // console.log(i + ' ' + field + ' = ' + rowcontext(i) + ', ' + rowcontext(field)); + // } }); jsonGrid.addFinEventListener('fin-double-click', function(e){ @@ -282,9 +301,9 @@ if (cell.y < jsonGrid.getHeaderRowCount()) { return; } - if(cell.x === 7) { - jsonGrid.toggleSelectRow(cell.y, []); - } + // if(cell.x === 7) { + // jsonGrid.toggleSelectRow(cell.y, []); + // } else if (cell.x !== -1) { if (jsonGrid.isEditing()) { jsonGrid.stopEditing(); @@ -451,11 +470,17 @@ showHeaderRow: true, showFilterRow: true, columnAutosizing: true, - editable: false + editable: false, + + cellSelection: true, + columnSelection: true, + rowSelection: true, }; jsonGrid.setState(state); + jsonGrid.setGroups([4, 0, 1]); + jsonGrid.addProperties({ scrollbarHoverOff: 'visible', scrollbarHoverOver: 'visible', From 99082f0667214d8ba36ab01c53f3244017bad8c1 Mon Sep 17 00:00:00 2001 From: steve wirts Date: Tue, 6 Oct 2015 15:32:33 -0400 Subject: [PATCH 6/8] final snows for wed meeting --- examples/bclys/fin-hypergrid.dev.html | 70 ++++++++++++++++++++------- examples/bclys/fin-hypergrid.min.html | 6 +-- examples/bclys/index.html | 4 +- 3 files changed, 58 insertions(+), 22 deletions(-) diff --git a/examples/bclys/fin-hypergrid.dev.html b/examples/bclys/fin-hypergrid.dev.html index 9eb41abb1..b55c8405a 100644 --- a/examples/bclys/fin-hypergrid.dev.html +++ b/examples/bclys/fin-hypergrid.dev.html @@ -17057,25 +17057,27 @@ return result; }, - selectRowsFromCells: function() { + selectRowsFromCells: function(offset) { + offset = offset || 0; var sm = this.rowSelectionModel; sm.clear(); for (var i = 0; i < this.selections.length; i++) { var each = this.selections[i]; var top = each.origin.y; var size = each.extent.y; - sm.select(top, top + size); + sm.select(top + offset, top + size + offset); } }, - selectColumnsFromCells: function() { + selectColumnsFromCells: function(offset) { + offset = offset || 0; var sm = this.columnSelectionModel; sm.clear(); for (var i = 0; i < this.selections.length; i++) { var each = this.selections[i]; var top = each.origin.x; var size = each.extent.x; - sm.select(top, top + size); + sm.select(top + offset, top + size + offset); } }, @@ -24663,17 +24665,20 @@ }, getRowContextFunction: function(selectedRows) { var self = this; - var val, i; + var val, i, rowIndex; + var headerRowCount = 0; //this.getGrid().getHeaderRowCount(); return function(index) { var result = new Array(selectedRows.length); if (isNaN(index)) { for (i = 0; i < selectedRows.length; i++) { - val = valueOrFunctionExecute(self.getValueByField(index, selectedRows[i])); + rowIndex = selectedRows[i] - headerRowCount; + val = valueOrFunctionExecute(self.getValueByField(index, rowIndex)); result[i] = val; } } else { for (i = 0; i < selectedRows.length; i++) { - val = valueOrFunctionExecute(self.getDataSource().getValue(index, selectedRows[i])); + rowIndex = selectedRows[i] - headerRowCount; + val = valueOrFunctionExecute(self.getDataSource().getValue(index, rowIndex)); result[i] = val; } @@ -26882,6 +26887,18 @@ setGlobalFilter: function(string) { this.getDataModel().setGlobalFilter(string); }, + + getSelectedRows: function() { + return this.getGrid().getSelectionModel().getSelectedRows(); + }, + + getSelectedColumns: function() { + return this.getGrid().getSelectionModel().getSelectedColumns(); + }, + + getSelections: function() { + return this.getGrid().getSelectionModel().getSelections(); + }, }); })(); @@ -29089,6 +29106,22 @@ this.changed(); }, + getSelectedRows: function() { + var offset = -this.getGrid().getHeaderRowCount(); + var selections = this.getGrid().getSelectionModel().getSelectedRows(); + var result = selections.map(function(each) { + return each + offset; + }); + return result; + }, + + getSelectedColumns: function() { + return this.getGrid().getSelectionModel().getSelectedColumns(); + }, + + getSelections: function() { + return this.getGrid().getSelectionModel().getSelections(); + }, }); @@ -37495,16 +37528,7 @@ this.repaint(); }, - getSelectedRows: function() { - return this.getSelectionModel().getSelectedRows(); - }, - getSelectedColumns: function() { - return this.getSelectionModel().getSelectedColumns(); - }, - getSelections: function() { - return this.getSelectionModel().getSelections(); - }, isShowRowNumbers: function() { return this.resolveProperty('showRowNumbers'); }, @@ -37616,7 +37640,19 @@ }, selectColumnsFromCells: function() { this.getSelectionModel().selectColumnsFromCells(); - } + }, + + getSelectedRows: function() { + return this.getBehavior().getSelectedRows(); + }, + + getSelectedColumns: function() { + return this.getBehavior().getSelectedColumns(); + }, + + getSelections: function() { + return this.getBehavior().getSelections(); + }, }); })(); /* jslint ignore:line */ diff --git a/examples/bclys/fin-hypergrid.min.html b/examples/bclys/fin-hypergrid.min.html index 7b0f05f5d..f5847b45e 100644 --- a/examples/bclys/fin-hypergrid.min.html +++ b/examples/bclys/fin-hypergrid.min.html @@ -23,6 +23,6 @@ ⬤ {{labelAdapter(item)}} -
  • \ No newline at end of file +
  • \ No newline at end of file diff --git a/examples/bclys/index.html b/examples/bclys/index.html index babef4254..8664ed3ef 100644 --- a/examples/bclys/index.html +++ b/examples/bclys/index.html @@ -10,7 +10,7 @@ - + \ No newline at end of file +
  • \ No newline at end of file diff --git a/examples/bclys/index.html b/examples/bclys/index.html index 8664ed3ef..d6938cb44 100644 --- a/examples/bclys/index.html +++ b/examples/bclys/index.html @@ -154,7 +154,7 @@ setInterval(function(){ topTotals[1][5] = Math.round(Math.random()*100); jsonModel.changed(); - },300) + },100) //lets set 2 rows of totals @@ -408,6 +408,10 @@ console.log('fin-editor-key-down', e.detail); }); + jsonGrid.addFinEventListener('fin-groups-changed', function(e) { + console.log('fin-groups-changed', e.detail); + }); + jsonGrid.addFinEventListener('fin-context-menu', function(e) { var modelPoint = e.detail.gridCell; var headerRowCount = jsonGrid.getHeaderRowCount(); From 9e7f5d64e276c5479310ad927aec5e9f35896af2 Mon Sep 17 00:00:00 2001 From: steve wirts Date: Thu, 8 Oct 2015 16:03:51 -0400 Subject: [PATCH 8/8] selection region visual queue finished --- examples/bclys/fin-hypergrid.dev.html | 172 +++++++++++++++++++++----- examples/bclys/fin-hypergrid.min.html | 6 +- examples/bclys/index.html | 4 +- 3 files changed, 143 insertions(+), 39 deletions(-) diff --git a/examples/bclys/fin-hypergrid.dev.html b/examples/bclys/fin-hypergrid.dev.html index ca2c261a6..f6f0bda9e 100644 --- a/examples/bclys/fin-hypergrid.dev.html +++ b/examples/bclys/fin-hypergrid.dev.html @@ -15575,6 +15575,8 @@ x = 0; var start = 0; + var firstVX, lastVX; + var firstVY, lastVY; if (grid.isShowRowNumbers()) { start--; this.columnEdges[-1] = -1; @@ -15583,6 +15585,10 @@ vx = c; if (c >= numFixedColumns) { vx = vx + scrollLeft; + if (firstVX === undefined) { + firstVX = vx; + } + lastVX = vx; } if (x > viewWidth || numColumns <= vx) { break; @@ -15603,6 +15609,10 @@ vy = r; if (r >= numFixedRows) { vy = vy + scrollTop; + if (firstVY === undefined) { + firstVY = vy; + } + lastVY = vy; } if (y > viewHeight || numRows <= vy) { break; @@ -15613,11 +15623,7 @@ this.visibleRows[r] = vy; this.rowEdgesIndexMap[vy] = r; } - // console.log('cols', this.getColumnEdges()); - // console.log('rows', this.rowEdges); - // console.log('col#', this.visibleColumns); - // console.log('row#', this.visibleRows); - //console.log('ms', Date.now() - startTime); + this.dataWindow = grid.rectangles.rectangle.create(firstVX, firstVY, lastVX - firstVX, lastVY - firstVY); }, /** @@ -15653,7 +15659,7 @@ setGrid: function(grid) { this.grid = grid; - + this.startAnimator(); //lets make use of prototype inheritance for cell properties }, @@ -15790,21 +15796,35 @@ * #### returns: [fin-rectangle](http://stevewirts.github.io/fin-rectangle/components/fin-rectangle/) */ _getBoundsOfCell: function(c, r) { + var xOutside = false; + var yOutside = false; var columnEdges = this.getColumnEdges(); + var rowEdges = this.getRowEdges(); + var x = this.columnEdgesIndexMap[c]; var y = this.rowEdgesIndexMap[r]; + if (x === undefined) { + x = this.columnEdgesIndexMap[c - 1]; + xOutside = true; + } + + if (y === undefined) { + y = this.rowEdgesIndexMap[r - 1]; + yOutside = true; + } + var ox = columnEdges[x], - oy = this.rowEdges[y], + oy = rowEdges[y], cx = columnEdges[x + 1], - cy = this.rowEdges[y + 1], + cy = rowEdges[y + 1], ex = cx - ox, ey = cy - oy; var cell = this.cell; - cell.x = ox; - cell.y = oy; - cell.width = ex; - cell.height = ey; + cell.x = xOutside ? cx : ox; + cell.y = yOutside ? cy : oy; + cell.width = xOutside ? 0 : ex; + cell.height = yOutside ? 0 : ey; return cell; @@ -15991,7 +16011,7 @@ this.paintGridlines(gc); //this.blankOutOverflow(gc); // no longer needed this.renderOverrides(gc); - this.renderFocusCell(gc); + //this.renderFocusCell(gc); gc.closePath(); }, @@ -16010,37 +16030,82 @@ renderFocusCell: function(gc) { var grid = this.getGrid(); - var mouseDown = grid.getMouseDown(); - var extent = grid.getDragExtent(); - var o = this._getBoundsOfCell(mouseDown.x, mouseDown.y); - var ox = o.x; - var oy = o.y; - var ow = o.width; - var oh = o.height; - var e = this._getBoundsOfCell(mouseDown.x + extent.x, mouseDown.y + extent.y); - var ex = e.x; - var ey = e.y; - var ew = e.width; - var eh = e.height; + var selections = grid.getSelectionModel().getSelections(); + if (!selections || selections.length === 0) { + return; + } + var selection = selections[selections.length - 1]; + var mouseDown = selection.origin; + if (mouseDown.x === -1) { + //no selected area, lets exit + return; + } + + var visibleColumns = this.getVisibleColumns(); + var visibleRows = this.getVisibleRows(); + var lastVisibleColumn = visibleColumns[visibleColumns.length - 1]; + var lastVisibleRow = this.visibleRows[this.visibleRows.length - 1]; + + var extent = selection.extent; + + var dpOX = Math.min(mouseDown.x, mouseDown.x + extent.x); + var dpOY = Math.min(mouseDown.y, mouseDown.y + extent.y); + + //lets check if our selection rectangle is scrolled outside of the visible area + if (dpOX > lastVisibleColumn) { + return; //the top of our rectangle is below visible + } + if (dpOY > lastVisibleRow) { + return; //the left of our rectangle is to the right of being visible + } + + var dpEX = Math.max(mouseDown.x, mouseDown.x + extent.x) + 1; + dpEX = Math.min(dpEX, 1 + lastVisibleColumn); + + var dpEY = Math.max(mouseDown.y, mouseDown.y + extent.y) + 1; + dpEY = Math.min(dpEY, 1 + lastVisibleRow); + + var o = this._getBoundsOfCell(dpOX, dpOY); + var ox = Math.round((o.x === undefined) ? grid.getFixedColumnsWidth() : o.x); + var oy = Math.round((o.y === undefined) ? grid.getFixedRowsHeight() : o.y); + // var ow = o.width; + // var oh = o.height; + var e = this._getBoundsOfCell(dpEX, dpEY); + var ex = Math.round((e.x === undefined) ? grid.getFixedColumnsWidth() : e.x); + var ey = Math.round((e.y === undefined) ? grid.getFixedRowsHeight() : e.y); + // var ew = e.width; + // var eh = e.height; var x = Math.min(ox, ex); var y = Math.min(oy, ey); - var width = 2 + ex + ew - ox; - var height = 2 + ey + eh - oy; + var width = 1 + ex - ox; + var height = 1 + ey - oy; if (x === ex) { - width = ox + ow - ex; + width = ox - ex; } if (y === ey) { - height = oy + oh - ey; + height = oy - ey; } - gc.beginPath(); + if (width * height < 1) { + //if we are only a skinny line, don't render anything + return; + } + gc.rect(x, y, width, height); - gc.fillStyle = 'rgba(0, 0, 0, 0.2)'; - gc.fill(); + //gc.fillStyle = 'rgba(0, 0, 0, 0.2)'; + //gc.fill(); gc.lineWidth = 1; + gc.strokeStyle = 'white'; + + // animate the dashed line a bit here for fun + + gc.stroke(); + + gc.rect(x, y, width, height); + gc.strokeStyle = 'black'; // animate the dashed line a bit here for fun - gc.setLineDash(this.focusLineStep[Math.floor(10 * (Date.now() / 500 % 1)) % this.focusLineStep.length]); + gc.setLineDash(this.focusLineStep[Math.floor(10 * (Date.now() / 300 % 1)) % this.focusLineStep.length]); gc.stroke(); }, @@ -16233,6 +16298,9 @@ return this.columnEdges; }, + getRowEdges: function() { + return this.rowEdges; + }, /** * @function * @instance @@ -16552,6 +16620,7 @@ var isHierarchyColumn = grid.isHierarchyColumn(c); var isRowSelected = grid.isRowSelected(r); var isColumnSelected = grid.isColumnSelected(c); + var isCellSelected = grid.isCellSelected(c, r); if (c === -1 && !isRowSelected) { baseProperties = baseProperties.rowNumbersProperties; @@ -16590,6 +16659,7 @@ cellProperties.isColumnHovered = this.isRowHovered(c, r); cellProperties.isRowHovered = this.isColumnHovered(c, r); cellProperties.bounds = this._getBoundsOfCell(c, r); + cellProperties.isCellSelected = isCellSelected; cellProperties.isRowSelected = isRowSelected; cellProperties.isColumnSelected = isColumnSelected; @@ -16630,6 +16700,23 @@ return 0; } return colEdges[0]; + }, + startAnimator: function() { + var animate; + var self = this; + animate = function() { + self.animate(); + requestAnimationFrame(animate); + }; + requestAnimationFrame(animate); + }, + animate: function() { + var ctx = this.getCanvas().canvasCTX; + ctx.beginPath(); + ctx.save(); + this.renderFocusCell(ctx); + ctx.restore(); + ctx.closePath(); } }); @@ -17026,6 +17113,14 @@ if (this.isColumnSelected(x) || this.isRowSelected(y)) { return true; } + return this._isCellSelected(selections, x, y); + }, + + isCellSelected: function(x, y) { + return this._isCellSelected(this.getSelections(), x, y); + }, + + _isCellSelected: function(selections, x, y) { for (var i = 0; i < selections.length; i++) { var each = selections[i]; if (this.rectangles.rectangle.contains(each, x, y)) { @@ -17034,7 +17129,6 @@ } return false; }, - /** * @function * @instance @@ -18594,6 +18688,10 @@ } gc.closePath(); } + if (config.isCellSelected) { + gc.fillStyle = 'rgba(0, 0, 0, 0.2)'; + gc.fillRect(x, y, width, height); + } var iconWidth = 0; if (leftIcon) { iyoffset = Math.round((height - leftIcon.height) / 2); @@ -26033,6 +26131,9 @@ getFixedColumnsWidth: function() { var count = this.getFixedColumnCount(); var total = 0; + if (this.getGrid().isShowRowNumbers()) { + total = this.getColumnWidth(-1); + } for (var i = 0; i < count; i++) { total = total + this.getColumnWidth(i); } @@ -37745,6 +37846,9 @@ getLastSelectionType: function() { return this.getSelectionModel().getLastSelectionType(); + }, + isCellSelected: function(x, y) { + return this.getSelectionModel().isCellSelected(x, y); } }); diff --git a/examples/bclys/fin-hypergrid.min.html b/examples/bclys/fin-hypergrid.min.html index 351e0c824..4883489f6 100644 --- a/examples/bclys/fin-hypergrid.min.html +++ b/examples/bclys/fin-hypergrid.min.html @@ -23,6 +23,6 @@ ⬤ {{labelAdapter(item)}} -
  • \ No newline at end of file +
  • \ No newline at end of file diff --git a/examples/bclys/index.html b/examples/bclys/index.html index d6938cb44..0440b2398 100644 --- a/examples/bclys/index.html +++ b/examples/bclys/index.html @@ -10,7 +10,7 @@ - +