feat(igx-grid): Copy behavior for the grids

Moved copy handler on the tbody
Copy with column formatters
Refactored some dead code

Closes #4907

Author: rkaraivanov

projects/igniteui-angular/src/lib/core/grid-selection.ts

@@ -371,11 +371,14 @@ export class IgxGridSelectionService {
         }
     }
 
-    keyboardStateOnFocus(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>): void {
+    keyboardStateOnFocus(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>, dom): void {
         const kbState = this.keyboardState;
 
         // Focus triggered by keyboard navigation
         if (kbState.active) {
+            if (isChromium()) {
+                this._moveSelectionChrome(dom);
+            }
             // Start generating a range if shift is hold
             if (kbState.shift) {
                 this.dragSelect(node, kbState);
@@ -524,4 +527,22 @@ export class IgxGridSelectionService {
             selection.addRange(this._selectionRange || document.createRange());
         }
     }
+
+    /**
+     * (╯°□°）╯︵ ┻━┻
+     * Chrome and Chromium don't care about the active
+     * range after keyboard navigation, thus this.
+     */
+    _moveSelectionChrome(node: Node) {
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        const range = new Range();
+        range.selectNode(node);
+        range.collapse(true);
+        selection.addRange(range);
+    }
+}
+
+export function isChromium(): boolean {
+    return (/Chrom|e?ium/g.test(navigator.userAgent) || /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent);
 }

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -1,5 +1,5 @@
 <ng-template #defaultCell>
-    <div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
+    <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
         [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
         class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -520,8 +520,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     protected isInCompositionMode = false;
     protected compositionStartHandler;
     protected compositionEndHandler;
-    protected focusHandlerIE;
-    protected focusOut;
     private _highlight: IgxTextHighlightDirective;
 
 
@@ -552,12 +550,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
                 // Hitting Enter with IME submits and exits from edit mode instead of first closing the IME dialog
                 this.nativeElement.addEventListener('compositionstart', this.compositionStartHandler);
                 this.nativeElement.addEventListener('compositionend', this.compositionEndHandler);
-
-                // https://stackoverflow.com/q/51404782
-                this.focusHandlerIE = (e: FocusEvent) => this.onFocus(e);
-                this.focusOut = () => this.onBlur();
-                this.nativeElement.addEventListener('focusin', this.focusHandlerIE);
-                this.nativeElement.addEventListener('focusout', this.focusOut);
             }
         });
     }
@@ -575,8 +567,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             if (isIE()) {
                 this.nativeElement.removeEventListener('compositionstart', this.compositionStartHandler);
                 this.nativeElement.removeEventListener('compositionend', this.compositionEndHandler);
-                this.nativeElement.removeEventListener('focusin', this.focusHandlerIE);
-                this.nativeElement.removeEventListener('focusout', this.focusOut);
             }
         });
     }
@@ -792,7 +782,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         }
 
         this.selectionService.primaryButton = true;
-        this.selectionService.keyboardStateOnFocus(node, this.grid.onRangeSelection);
+        this.selectionService.keyboardStateOnFocus(node, this.grid.onRangeSelection, this.nativeElement);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -105,7 +105,6 @@ const MIN_ROW_EDITING_COUNT_THRESHOLD = 2;
 export const IgxGridTransaction = new InjectionToken<string>('IgxGridTransaction');
 
 export interface IGridClipboardEvent {
-    type: string;
     data: any[];
     cancel: boolean;
 }
@@ -2334,6 +2333,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     clipboardOptions = {
         enabled: true,
         copyHeaders: true,
+        copyFormatters: true,
         separator: '\t'
     };
 
@@ -2601,9 +2601,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
     private keydownHandler(event) {
         const key = event.key.toLowerCase();
-        if (event.ctrlKey && key === 'c' && this.clipboardOptions.enabled) {
-            isIE() ? this.copyHandler(null, true) : this.document.execCommand('copy');
-        }
+        // TODO: Move in a separate handler on the `grid body`.
+        // if (event.ctrlKey && key === 'c' && isIE()) {
+        //     this.copyHandler(null, true);
+        // }
         if ((isNavigationKey(key) && event.keyCode !== 32) || key === 'tab' || key === 'pagedown' || key === 'pageup') {
             event.preventDefault();
             if (key === 'pagedown') {
@@ -4814,7 +4815,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this.selectionService.ranges;
     }
 
-    extractDataFromSelection(source: any[]): any[] {
+    extractDataFromSelection(source: any[], applyColumnFormatters = false): any[] {
         let column: IgxColumnComponent;
         let record = {};
         const selectedData = [];
@@ -4835,7 +4836,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             for (const each of temp) {
                 column = visibleColumns[each];
                 if (column) {
-                    record[column.field] = source[row][column.field];
+                    record[column.field] = applyColumnFormatters && column.formatter ? column.formatter(source[row][column.field])
+                        : source[row][column.field];
                 }
             }
             if (Object.keys(record).length) {
@@ -4846,10 +4848,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return selectedData;
     }
 
-    getSelectedData() {
+    getSelectedData(applyColumnFormatters = false) {
         const source = this.verticalScrollContainer.igxForOf;
-
-        return this.extractDataFromSelection(source);
+        return this.extractDataFromSelection(source, applyColumnFormatters);
     }
 
     /**
@@ -4873,7 +4874,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    // @HostListener('scroll', ['$event'])
     public scrollHandler(event) {
         this.parentVirtDir.getHorizontalScroll().scrollLeft += event.target.scrollLeft;
         this.verticalScrollContainer.getVerticalScroll().scrollTop += event.target.scrollTop;
@@ -4885,13 +4885,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    @HostListener('copy', ['$event'])
     public copyHandler(event, ie11 = false) {
-        if (!this.clipboardOptions.enabled) {
+        if (!this.clipboardOptions.enabled || this.crudService.inEditMode) {
             return;
         }
-        const data = this.getSelectedData();
-        const ev = { type: 'copy', data, cancel: false } as IGridClipboardEvent;
+
+        const data = this.getSelectedData(this.clipboardOptions.copyFormatters);
+        const ev = { data, cancel: false } as IGridClipboardEvent;
         this.onGridCopy.emit(ev);
 
         if (ev.cancel) {
@@ -4911,6 +4911,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
 
         event.preventDefault();
+
+        /* Necessary for the hiearachical case but will probably have to
+           change how getSelectedData is propagated in the hiearachical grid
+        */
+        event.stopPropagation();
         event.clipboardData.setData('text/plain', result);
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -126,7 +126,7 @@
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalSroll()' [style.width.px]="scrollWidth"></div>
 </div>
 
-<div igxGridBody class="igx-grid__tbody">
+<div igxGridBody (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
         [style.height.px]='calcHeight' [style.width.px]='calcWidth + 1' #tbody (scroll)='scrollHandler($event)'
@@ -263,4 +263,4 @@
 </ng-template>
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
-<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -933,7 +933,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
         }
     }
 
-    getSelectedData(): any[] {
+    getSelectedData(applyColumnFormatters = false): any[] {
         if (this.groupingExpressions.length) {
             const source = [];
 
@@ -947,9 +947,9 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
             };
 
             this.verticalScrollContainer.igxForOf.forEach(process);
-            return this.extractDataFromSelection(source);
+            return this.extractDataFromSelection(source, applyColumnFormatters);
         } else {
-            return super.getSelectedData();
+            return super.getSelectedData(applyColumnFormatters);
         }
     }
 

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -93,7 +93,7 @@
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalSroll()' [style.width.px]="scrollWidth"></div>
 </div>
 
-<div igxGridBody class="igx-grid__tbody">
+<div igxGridBody (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" role="rowgroup"
         [style.height.px]='calcHeight' [style.width.px]='calcWidth + 1' #tbody (scroll)='scrollHandler($event)'>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

@@ -1,5 +1,5 @@
 <ng-template #defaultCell>
-    <div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
+    <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
         [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
         class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
@@ -11,7 +11,7 @@
             <input igxInput [(ngModel)]="editValue" [igxFocus]="focused">
         </igx-input-group>
     </ng-container>
-    <ng-container *ngIf="column.dataType === 'number'"> 
+    <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group displayDensity="compact">
             <input igxInput [(ngModel)]="editValue" [igxFocus]="focused"  type="number">
         </igx-input-group>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -83,7 +83,7 @@
         id="right" class="igx-grid__scroll-on-drag-right"></span>
 </div>
 
-<div igxGridBody class="igx-grid__tbody">
+<div igxGridBody (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
         [style.height.px]='calcHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)'
@@ -197,4 +197,4 @@
 </ng-template>
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
-<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts

@@ -729,7 +729,7 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent implements IGridD
         };
     }
 
-    getSelectedData(): any[] {
+    getSelectedData(applyColumnFormatters = false): any[] {
         const source = [];
 
         const process = (record) => {
@@ -741,7 +741,7 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent implements IGridD
         };
 
         this.verticalScrollContainer.igxForOf.forEach(process);
-        return this.extractDataFromSelection(source);
+        return this.extractDataFromSelection(source, applyColumnFormatters);
     }
 
     /**