feature(wysiwyg): refactor multiselect into directive

Author: k-belov

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.html

@@ -5,22 +5,27 @@
     (cdkDropListDropped)="droppedIntoList($event)"
     [class.dragging]="dragging"
     cdkDropList
+    multiselectList
+    [items]="slides"
+    [(select)]="selectedSlideIndexes"
   >
     <div
       (cdkDragDropped)="dropped()"
       (cdkDragEnded)="dragEnded()"
       (cdkDragStarted)="dragStarted($event)"
       (click)="select($event, index)"
       *ngFor="let slide of slides; let index = index; trackBy: trackBySlideId"
-      [class.selected]="multiSelectionService.selections.includes(index)"
+      [class.selected]="selectedSlideIndexes.includes(index)"
       [class.current]="index == currentSlideIndex"
       cdkDragLockAxis="y"
+      multiselectItem
+      [item]="index"
       cdkDrag
       class="slide-wrapper"
       role="button"
     >
       <div *cdkDragPreview>
-        <div *ngFor="let sel of multiSelectionService.selections"></div>
+        <div *ngFor="let sel of selectedSlideIndexes"></div>
       </div>
       <div *cdkDragPlaceholder>
         <div

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.ts

@@ -14,9 +14,8 @@ import { NavigationService } from '../services/navigation.service';
 import { ContentSlide } from '../types';
 import {
   isCtrlEvent,
-  isShiftEvent,
-  MultiSelectionService
-} from './multi-selection.service';
+  isShiftEvent
+} from '../../../../multiselect/multiselect.service';
 
 @Component({
   selector: 'slides-side-panel',
@@ -30,24 +29,19 @@ export class SidePanelComponent implements OnInit {
 
   public dragging: DragRef = null;
   public sidePanelInFocus = false;
+  public selectedSlideIndexes: number[] = [];
 
   constructor(
     readonly el: ElementRef,
     readonly location: Location,
     readonly route: ActivatedRoute,
     readonly router: Router,
-    readonly multiSelectionService: MultiSelectionService,
     readonly contentService: ContentService,
     readonly navigationService: NavigationService
   ) {}
 
   ngOnInit() {
-    this.multiSelectionService.selections$.subscribe(selections => {
-      console.log({ selections });
-    });
-
-    this.multiSelectionService.addToSelections(this.currentSlideIndex);
-    this.multiSelectionService.lastSingleSelection = this.currentSlideIndex;
+    this.selectedSlideIndexes = [this.currentSlideIndex];
   }
 
   trackBySlideId(index: number, slide: ContentSlide) {
@@ -80,22 +74,18 @@ export class SidePanelComponent implements OnInit {
       return;
     }
 
-    if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
-      const allSideIndexes = this.slides.map((slide, index) => index);
-      this.multiSelectionService.selectAll(allSideIndexes);
-
-      event.preventDefault();
-    } else if (event.key === 'Escape' && this.dragging) {
+    if (event.key === 'Escape' && this.dragging) {
       this.dragging.reset();
       document.dispatchEvent(new Event('mouseup'));
 
       event.preventDefault();
     } else if (event.key === 'Delete') {
       this.contentService.deleteSlides(
         this.presentationId,
-        this.multiSelectionService.selections
+        this.selectedSlideIndexes
       );
-      this.multiSelectionService.resetSelection(this.currentSlideIndex);
+
+      this.selectedSlideIndexes = [this.currentSlideIndex];
 
       event.preventDefault();
     }
@@ -104,10 +94,6 @@ export class SidePanelComponent implements OnInit {
   @HostListener('document:click', ['$event'])
   private handleClickEvent(event: MouseEvent) {
     this.sidePanelInFocus = this.el.nativeElement.contains(event.target);
-
-    if (!this.sidePanelInFocus) {
-      this.multiSelectionService.resetSelection(this.currentSlideIndex);
-    }
   }
 
   dragStarted(event: CdkDragStart) {
@@ -125,18 +111,17 @@ export class SidePanelComponent implements OnInit {
   droppedIntoList(event: CdkDragDrop<any, any>) {
     this.contentService.reorderSlides(
       this.presentationId,
-      this.multiSelectionService.selections,
-      event.currentIndex - this.multiSelectionService.selections.length + 1
+      this.selectedSlideIndexes,
+      event.currentIndex - this.selectedSlideIndexes.length + 1
     );
 
-    this.multiSelectionService.resetSelection(this.currentSlideIndex);
+    this.selectedSlideIndexes = [this.currentSlideIndex];
   }
 
   select(event: MouseEvent, index: number) {
-    this.multiSelectionService.select(event, index);
-
     if (!(isShiftEvent(event) || isCtrlEvent(event)) || !this.dragging) {
       this.navigationService.goToSlide(this.presentationId, index);
     }
   }
+
 }

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.module.ts

@@ -5,12 +5,11 @@ import { RouterModule } from '@angular/router';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
 import { PreviewModule } from '../preview/preview.module';
-import { MultiSelectionService } from './multi-selection.service';
+import { MultiselectModule } from '../../../../multiselect/multiselect.module';
 
 @NgModule({
   declarations: [SidePanelComponent],
-  providers: [MultiSelectionService],
   exports: [SidePanelComponent],
-  imports: [CommonModule, RouterModule, DragDropModule, PreviewModule]
+  imports: [CommonModule, RouterModule, DragDropModule, PreviewModule, MultiselectModule]
 })
 export class SidePanelModule {}

apps/codelab/src/app/multiselect/multiselect-item.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, HostListener, Inject, Input } from '@angular/core';
+import { MULTISELECT_LIST, MultiselectListDirective } from './multiselect-list.directive';
+
+@Directive({
+  selector: '[multiselectItem]'
+})
+export class MultiselectItemDirective {
+
+  @Input() item: number;
+
+  constructor(
+    @Inject(MULTISELECT_LIST) public parentList: MultiselectListDirective
+  ) {
+
+  }
+
+  @HostListener('click', ['$event'])
+  private handleClickEvent(event: MouseEvent) {
+    this.parentList.multiselectService.select(event, this.item);
+  }
+
+}

apps/codelab/src/app/multiselect/multiselect-list.directive.ts

@@ -0,0 +1,85 @@
+import { Directive, ElementRef, EventEmitter, HostListener, InjectionToken, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { MultiselectService } from './multiselect.service';
+
+export const MULTISELECT_LIST = new InjectionToken<MultiselectListDirective>('MultiselectList');
+
+@Directive({
+  selector: '[multiselectList]',
+  providers: [
+    {
+      provide: MULTISELECT_LIST,
+      useExisting: MultiselectListDirective
+    },
+    MultiselectService
+  ]
+})
+export class MultiselectListDirective implements OnInit, OnChanges, OnDestroy {
+  elementHasFocus = false;
+  @Input() items = [];
+  @Input() select = [];
+  @Output() selectChange = new EventEmitter<number[]>();
+  @Output() reset = new EventEmitter();
+  private readonly onDestroy = new Subject<void>();
+
+  constructor(
+    public readonly multiselectService: MultiselectService,
+    private readonly el: ElementRef
+  ) {
+
+  }
+
+  ngOnInit() {
+    this.multiselectService.selection$
+      .pipe(takeUntil(this.onDestroy))
+      .subscribe((selection) => {
+        this.selectChange.emit(selection);
+      });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if ('select' in changes) {
+      if (changes.select.firstChange && changes.select.currentValue[0] >= 0) {
+        const firstSelectIndex = changes.select.currentValue[0];
+
+        this.multiselectService.addToSelection(firstSelectIndex);
+        this.multiselectService.lastSingleSelection = firstSelectIndex;
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    this.onDestroy.next();
+    this.onDestroy.complete();
+  }
+
+  @HostListener('document:click', ['$event'])
+  private handleClickEvent(event: MouseEvent) {
+    this.elementHasFocus = this.el.nativeElement.contains(event.target);
+
+
+    // TODO
+    // if (!this.elementHasFocus) {
+    //
+    //   this.multiselectService.resetSelection(this.currentSlideIndex);
+    // }
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  private handleKeyboardEvent(event: KeyboardEvent) {
+    if (!this.elementHasFocus) {
+      return;
+    }
+
+    if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+      const allIndexes = this.items.map((_, index) => index);
+      this.multiselectService.selectAll(allIndexes);
+
+      event.preventDefault();
+    }
+  }
+
+}

apps/codelab/src/app/multiselect/multiselect.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+
+import { MultiselectItemDirective } from './multiselect-item.directive';
+import { MultiselectListDirective } from './multiselect-list.directive';
+
+@NgModule({
+  declarations: [
+    MultiselectListDirective,
+    MultiselectItemDirective
+  ],
+  exports: [
+    MultiselectListDirective,
+    MultiselectItemDirective
+  ],
+})
+export class MultiselectModule { }

apps/codelab/src/app/admin/content/presentation-editor/side-panel/multi-selection.service.ts renamed to apps/codelab/src/app/multiselect/multiselect.service.ts

@@ -11,62 +11,61 @@ export function isShiftEvent(event: MouseEvent) {
 }
 
 @Injectable()
-export class MultiSelectionService {
-  public selections$ = new BehaviorSubject<number[]>([]);
-  public selections: number[] = [];
+export class MultiselectService {
+  public selection$ = new BehaviorSubject<number[]>([]);
+  public selection: number[] = [];
 
   public lastSingleSelection: number | null = null;
 
   constructor() {}
 
   isAlreadySelected(index: number): boolean {
-    return this.selections.indexOf(index) >= 0;
+    return this.selection.indexOf(index) >= 0;
   }
 
-  normalizeSelections(indexes: number[]): number[] {
+  normalizeSelection(indexes: number[]): number[] {
     return indexes.sort((a, b) => a - b);
   }
 
   isSelectionEmpty(): boolean {
-    return this.selections.length < 1;
+    return this.selection.length < 1;
   }
 
-  setSelections(indexes: number[]) {
-    this.selections = this.normalizeSelections(indexes);
-    this.selections$.next(this.selections);
+  setSelection(indexes: number[]) {
+    this.selection = this.normalizeSelection(indexes);
+    this.selection$.next(this.selection);
   }
 
-  addToSelections(index: number) {
+  addToSelection(index: number) {
     if (!this.isAlreadySelected(index)) {
-      this.setSelections([...this.selections, index]);
+      this.setSelection([...this.selection, index]);
     }
   }
 
   select(event: MouseEvent, selectedIndex: number) {
-    const shiftSelect =
-      isShiftEvent(event) &&
-      (this.lastSingleSelection || this.lastSingleSelection === 0) &&
-      this.lastSingleSelection !== selectedIndex;
+    const shiftSelect = isShiftEvent(event)
+      && this.lastSingleSelection >= 0
+      && this.lastSingleSelection !== selectedIndex;
 
     if (this.isSelectionEmpty()) {
-      this.setSelections([selectedIndex]);
+      this.setSelection([selectedIndex]);
       this.lastSingleSelection = selectedIndex;
     } else if (isCtrlEvent(event)) {
       const alreadySelected = this.isAlreadySelected(selectedIndex);
 
       if (alreadySelected) {
-        const selectionsWithoutSelectedIndex = this.selections.filter(
+        const selectionWithoutSelectedIndex = this.selection.filter(
           index => index !== selectedIndex
         );
 
-        if (selectionsWithoutSelectedIndex.length > 0) {
-          this.setSelections(selectionsWithoutSelectedIndex);
+        if (selectionWithoutSelectedIndex.length > 0) {
+          this.setSelection(selectionWithoutSelectedIndex);
         } else {
-          this.setSelections([selectedIndex]);
+          this.setSelection([selectedIndex]);
           this.lastSingleSelection = selectedIndex;
         }
       } else {
-        this.setSelections([...this.selections, selectedIndex]);
+        this.setSelection([...this.selection, selectedIndex]);
         this.lastSingleSelection = selectedIndex;
       }
     } else if (shiftSelect) {
@@ -83,7 +82,7 @@ export class MultiSelectionService {
             : this.lastSingleSelection + index
         );
 
-      this.setSelections([...shiftSelection]);
+      this.setSelection([...shiftSelection]);
     } else {
       this.resetSelection(selectedIndex);
     }
@@ -92,10 +91,10 @@ export class MultiSelectionService {
   resetSelection(currentIndex: number) {
     this.lastSingleSelection = currentIndex;
 
-    this.setSelections([currentIndex]);
+    this.setSelection([currentIndex]);
   }
 
   selectAll(indexes: number[]) {
-    this.setSelections(indexes);
+    this.setSelection(indexes);
   }
 }