Merge pull request #124 from ibdafna/merged_cells

Cell merging

Author: blink1073

examples/example-datagrid/src/index.ts

@@ -10,7 +10,7 @@
 import 'es6-promise/auto';  // polyfill Promise on IE
 
 import {
-  BasicKeyHandler, BasicMouseHandler, BasicSelectionModel, CellRenderer,
+  BasicKeyHandler, BasicMouseHandler, BasicSelectionModel, CellRenderer, CellGroup,
   DataGrid, DataModel, JSONModel, TextRenderer, MutableDataModel, CellEditor, ICellEditor
 } from '@lumino/datagrid';
 
@@ -25,6 +25,74 @@ import {
 import '../style/index.css';
 
 
+class MergedCellModel extends DataModel {
+  rowCount(region: DataModel.RowRegion): number {
+    return region === "body" ? 20 : 3;
+  }
+
+  columnCount(region: DataModel.ColumnRegion): number {
+    return region === "body" ? 6 : 3;
+  }
+
+  data(region: DataModel.CellRegion, row: number, column: number): any {
+    if (region === "row-header") {
+      return `R: ${row}, ${column}`;
+    }
+    if (region === "column-header") {
+      return `C: ${row}, ${column}`;
+    }
+    if (region === "corner-header") {
+      return `N: ${row}, ${column}`;
+    }
+    return `(${row}, ${column})`;
+  }
+
+  groupCount(region: DataModel.RowRegion): number {
+    if (region === "body") {
+      return 3;
+    } else if (region === "column-header") {
+      return 1;
+    } else if (region === "row-header") {
+      return 2;
+    } else if (region === "corner-header") {
+      return 1;
+    }
+    return 0;
+  }
+
+  group(region: DataModel.CellRegion, groupIndex: number): CellGroup | null {
+    if (region === "body") {
+      return [
+        { r1: 1, c1: 1, r2: 2, c2: 2 },
+        { r1: 5, c1: 1, r2: 5, c2: 2 },
+        { r1: 3, c1: 5, r2: 4, c2: 5 },
+      ][groupIndex];
+    }
+
+    if (region === "column-header") {
+      return [{ r1: 0, c1: 4, r2: 1, c2: 4 }][
+        groupIndex
+      ];
+    }
+
+    if (region === "row-header") {
+      return [
+        { r1: 0, c1: 0, r2: 1, c2: 1 },
+        { r1: 4, c1: 0, r2: 5, c2: 0 },
+      ][groupIndex];
+    }
+
+    if (region === "corner-header") {
+      return [{ r1: 0, c1: 0, r2: 1, c2: 1 }][
+        groupIndex
+      ];
+    }
+
+    return null;
+  }
+}
+
+
 class LargeDataModel extends DataModel {
 
   rowCount(region: DataModel.RowRegion): number {
@@ -397,6 +465,7 @@ function main(): void {
   let model4 = new RandomDataModel(80, 80);
   let model5 = new JSONModel(Data.cars);
   let model6 = new MutableJSONModel(Data.editable_test_data);
+  let model7 = new MergedCellModel();
 
   let blueStripeStyle: DataGrid.Style = {
     ...DataGrid.defaultStyle,
@@ -518,13 +587,20 @@ function main(): void {
   let grid7 = new DataGrid();
   grid7.dataModel = model6;
 
+  let grid8 = new DataGrid();
+  grid8.dataModel = model7;
+  grid8.keyHandler = new BasicKeyHandler();
+  grid8.mouseHandler = new BasicMouseHandler();
+  grid8.selectionModel = new BasicSelectionModel({ dataModel: model7, selectionMode: 'cell' });
+
   let wrapper1 = createWrapper(grid1, 'Trillion Rows/Cols');
   let wrapper2 = createWrapper(grid2, 'Streaming Rows');
   let wrapper3 = createWrapper(grid3, 'Random Ticks 1');
   let wrapper4 = createWrapper(grid4, 'Random Ticks 2');
   let wrapper5 = createWrapper(grid5, 'JSON Data');
   let wrapper6 = createWrapper(grid6, 'Editable Grid');
   let wrapper7 = createWrapper(grid7, 'Copy');
+  let wrapper8 = createWrapper(grid8, 'Merged Cells');
 
   let dock = new DockPanel();
   dock.id = 'dock';
@@ -536,6 +612,7 @@ function main(): void {
   dock.addWidget(wrapper5, { mode: 'split-bottom', ref: wrapper2 });
   dock.addWidget(wrapper6, { mode: 'tab-before', ref: wrapper1 });
   dock.addWidget(wrapper7, { mode: 'split-bottom', ref: wrapper6 });
+  dock.addWidget(wrapper8, { mode: 'tab-after', ref: wrapper1 });
   dock.activateWidget(wrapper6);
 
   window.onresize = () => { dock.update(); };

packages/datagrid/src/basicmousehandler.ts

@@ -35,6 +35,10 @@ import {
   CellEditor
 } from './celleditor';
 
+import { 
+  CellGroup 
+} from './cellgroup';
+
 /**
  * A basic implementation of a data grid mouse handler.
  *
@@ -310,6 +314,15 @@ class BasicMouseHandler implements DataGrid.IMouseHandler {
     } else if (region === 'row-header') {
       r1 = accel ? row : shift ? model.cursorRow : row;
       r2 = row;
+
+      const selectionGroup: CellGroup = {r1: r1, c1: 0, r2: r2, c2: 0};
+      const joinedGroup = CellGroup.joinCellGroupsIntersectingAtAxis(grid.dataModel!, ["row-header", "body"], "row", selectionGroup);
+      // Check if there are any merges
+      if (joinedGroup.r1 != Number.MAX_VALUE) {
+        r1 = joinedGroup.r1;
+        r2 = joinedGroup.r2;
+      }
+      
       c1 = 0;
       c2 = Infinity;
       cursorRow = accel ? row : shift ? model.cursorRow : row;
@@ -320,6 +333,15 @@ class BasicMouseHandler implements DataGrid.IMouseHandler {
       r2 = Infinity;
       c1 = accel ? column : shift ? model.cursorColumn : column;
       c2 = column;
+
+      const selectionGroup: CellGroup = {r1: 0, c1: c1, r2: 0, c2: c2};
+      const joinedGroup = CellGroup.joinCellGroupsIntersectingAtAxis(grid.dataModel!, ["column-header", "body"], "column", selectionGroup);
+      // Check if there are any merges
+      if (joinedGroup.c1 != Number.MAX_VALUE) {
+        c1 = joinedGroup.c1;
+        c2 = joinedGroup.c2;
+      }
+
       cursorRow = accel ? 0 : shift ? model.cursorRow : 0;
       cursorColumn = accel ? column : shift ? model.cursorColumn : column;
       clear = accel ? 'none' : shift ? 'current' : 'all';
@@ -464,13 +486,32 @@ class BasicMouseHandler implements DataGrid.IMouseHandler {
     if (data.region === 'row-header' || mode === 'row') {
       r1 = data.row;
       r2 = grid.rowAt('body', vy);
+
+      const selectionGroup: CellGroup = {r1: r1, c1: 0, r2: r2, c2: 0};
+      const joinedGroup = CellGroup.joinCellGroupsIntersectingAtAxis(grid.dataModel!, ["row-header", "body"], "row", selectionGroup);
+      // Check if there are any merges
+      if (joinedGroup.r1 != Number.MAX_VALUE) {
+        r1 = Math.min(r1, joinedGroup.r1);
+        r2 = Math.max(r2, joinedGroup.r2);
+      }
+
+
       c1 = 0;
       c2 = Infinity;
     } else if (data.region === 'column-header' || mode === 'column') {
       r1 = 0;
       r2 = Infinity;
       c1 = data.column;
       c2 = grid.columnAt('body', vx);
+
+      const selectionGroup: CellGroup = {r1: 0, c1: c1, r2: 0, c2: c2};
+      const joinedGroup = CellGroup.joinCellGroupsIntersectingAtAxis(grid.dataModel!, ["column-header", "body"], "column", selectionGroup);
+      // Check if there are any merges
+      if (joinedGroup.c1 != Number.MAX_VALUE) {
+        c1 = joinedGroup.c1;
+        c2 = joinedGroup.c2;
+      }
+
     } else {
       r1 = cursorRow;
       r2 = grid.rowAt('body', vy);

packages/datagrid/src/celleditor.ts

@@ -29,6 +29,9 @@ import {
   Notification
 } from './notification';
 
+import { CellGroup 
+} from './cellgroup';
+
 /**
  * A response object returned from cell input validator
  */
@@ -582,12 +585,31 @@ abstract class CellEditor implements ICellEditor, IDisposable {
    */
   protected getCellInfo(cell: CellEditor.CellConfig): Private.ICellInfo {
     const { grid, row, column } = cell;
-    const data = grid.dataModel!.data('body', row, column);
+    let data, columnX, rowY, width, height;
+    const cellGroup = CellGroup.getGroup(grid.dataModel!, "body", row, column);
+
+    if (cellGroup) {
+      columnX = grid.headerWidth - grid.scrollX + grid.columnOffset('body', cellGroup.c1);
+      rowY = grid.headerHeight - grid.scrollY + grid.rowOffset('body', cellGroup.r1);
+      width = 0;
+      height = 0;
+
+      for (let r = cellGroup.r1; r <= cellGroup.r2; r++) {
+        height += grid.rowSize('body', r);
+      }
 
-    const columnX = grid.headerWidth - grid.scrollX + grid.columnOffset('body', column);
-    const rowY = grid.headerHeight - grid.scrollY + grid.rowOffset('body', row);
-    const width = grid.columnSize('body', column);
-    const height = grid.rowSize('body', row);
+      for (let c = cellGroup.c1; c <= cellGroup.c2; c++) {
+        width += grid.columnSize('body', c);
+      }
+
+      data = grid.dataModel!.data('body', cellGroup.r1, cellGroup.c1);
+    } else {
+      columnX = grid.headerWidth - grid.scrollX + grid.columnOffset('body', column);
+      rowY = grid.headerHeight - grid.scrollY + grid.rowOffset('body', row);
+      width = grid.columnSize('body', column);
+      height = grid.rowSize('body', row);
+      data = grid.dataModel!.data('body', row, column);
+    }
 
     return {
       grid: grid,

packages/datagrid/src/celleditorcontroller.ts

@@ -20,6 +20,10 @@ import {
     ICellEditResponse
 } from './celleditor';
 
+import {
+    CellGroup 
+} from './cellgroup';
+
 import {
   DataModel, MutableDataModel
 } from './datamodel';
@@ -183,7 +187,16 @@ class CellEditorController implements ICellEditorController {
 
     const grid = cell.grid;
     const dataModel = grid.dataModel as MutableDataModel;
-    dataModel.setData('body', cell.row, cell.column, response.value);
+    let row = cell.row;
+    let column = cell.column;
+
+    const cellGroup = CellGroup.getGroup(grid.dataModel!, "body", row, column);
+    if (cellGroup) {
+      row = cellGroup.r1;
+      column = cellGroup.c1;
+    }
+
+    dataModel.setData('body', row, column, response.value);
     grid.viewport.node.focus();
     if (response.cursorMovement !== 'none') {
       grid.moveCursor(response.cursorMovement);