feat(multisort): add selection service

Author: nivekcode

projects/ng-sortgrid/src/lib/ng-sortgrid-item.directive.ts

@@ -1,15 +1,23 @@
-import {AfterViewInit, Directive, ElementRef, HostListener, Input, NgZone} from '@angular/core';
+import {AfterViewInit, Directive, ElementRef, HostListener, Input, NgZone, OnInit} from '@angular/core';
 import {SortService} from './sort.service';
+import {SelectionService} from './selection.service';
 
 @Directive({
   selector: '[ngSortgridItem]'
 })
-export class NgSortgridItemDirective implements AfterViewInit {
+export class NgSortgridItemDirective implements OnInit, AfterViewInit {
 
   @Input('ngSortgridItem')
   private ngSortGridItemKey: string;
+  private selected: boolean;
 
-  constructor(public el: ElementRef, public zone: NgZone, private sortService: SortService) {
+  private readonly SELECTED_CLASS = 'selected';
+
+  constructor(public el: ElementRef, public zone: NgZone, private sortService: SortService, private selectionService: SelectionService) {
+  }
+
+  ngOnInit(): void {
+    this.selected = false;
   }
 
   ngAfterViewInit(): void {
@@ -38,4 +46,12 @@ export class NgSortgridItemDirective implements AfterViewInit {
   drop(event): void {
     console.log('Drop', event);
   }
+
+  @HostListener('click', ['$event'])
+  clicked(event): void {
+    const element = event.target;
+    this.selected = !this.selected;
+    this.selected ? element.classList.add(this.SELECTED_CLASS) : element.classList.remove(this.SELECTED_CLASS);
+    this.selectionService.updateSelectedDragItem(element, this.selected);
+  }
 }

projects/ng-sortgrid/src/lib/selection.service.ts

@@ -0,0 +1,62 @@
+import {Injectable} from '@angular/core';
+import {fromEvent, merge, NEVER, Observable, Subject} from 'rxjs';
+import {filter, mapTo, switchMap} from 'rxjs/operators';
+
+enum ChangeAction {
+  ADD,
+  REMOVE
+}
+
+interface SelectionChange {
+  item: Node;
+  action: ChangeAction;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SelectionService {
+
+  private COMMAND_KEY = 'Meta';
+  private CONTROL_KEY = 'Control';
+
+  private selectionChange$ = new Subject<SelectionChange>();
+  private selectedElements: Node[] = [];
+
+  constructor() {
+    const selectionKeyPressed$ = this.selectionKeyPressed();
+    selectionKeyPressed$.pipe(
+      switchMap((pressed) => pressed ? this.selectionChange$ : NEVER)
+    ).subscribe((selectionChange: SelectionChange) => this.handleSelectionChange(selectionChange));
+  }
+
+  private handleSelectionChange(selectionChange: SelectionChange): void {
+    if (selectionChange.action === ChangeAction.ADD) {
+      this.selectedElements.push(selectionChange.item);
+    }
+    if (selectionChange.action === ChangeAction.REMOVE) {
+      this.selectedElements = this.selectedElements.filter(
+        (element: Node) => element !== selectionChange.item
+      );
+    }
+  }
+
+  private selectionKeyPressed(): Observable<boolean> {
+    const selectionKeyPressed = fromEvent(window, 'keydown').pipe(
+      filter((keyboardEvent: KeyboardEvent) => keyboardEvent.key === this.COMMAND_KEY || keyboardEvent.key === this.CONTROL_KEY),
+      mapTo(true)
+    );
+    const keyup = fromEvent(window, 'keyup').pipe(mapTo(false));
+    return merge(selectionKeyPressed, keyup);
+  }
+
+  public updateSelectedDragItem(item: Node, selected: boolean): void {
+    this.selectionChange$.next({
+      item, action: selected ? ChangeAction.ADD : ChangeAction.REMOVE
+    });
+  }
+
+  public getSelectedElements(): Node[] {
+    return this.selectedElements;
+  }
+}

projects/ng-sortgrid/src/lib/sort.service.ts

@@ -1,4 +1,5 @@
 import {Injectable} from '@angular/core';
+import {SelectionService} from './selection.service';
 
 @Injectable({
   providedIn: 'root'
@@ -8,9 +9,14 @@ export class SortService {
   private dragIndex: number;
   private dragElements: Node[];
 
+  constructor(private selectionService: SelectionService) {
+  }
+
   public startDrag(dragItem: Node): void {
+    console.log('Im drag start');
     this.dragIndex = this.indexOf(dragItem.parentNode.children, dragItem);
-    this.dragElements = [dragItem];
+    const slectedElements = this.selectionService.getSelectedElements();
+    this.dragElements = slectedElements.length > 0 ? slectedElements : [dragItem];
   }
 
   public sort(dropElement: Node): void {