feature(wysiwyg): refactor service into multiselect-model

Author: k-belov

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

@@ -6,31 +6,29 @@
     [class.dragging]="dragging"
     cdkDropList
     multiselectList
-    [items]="slides"
-    [(select)]="selectedSlideIndexes"
+    [msModel]="selectionModel"
+    [msItems]="slideIds"
   >
     <div
       (cdkDragDropped)="dropped()"
       (cdkDragEnded)="dragEnded()"
       (cdkDragStarted)="dragStarted($event)"
       (click)="select($event, index)"
       *ngFor="let slide of slides; let index = index; trackBy: trackBySlideId"
-      [class.selected]="selectedSlideIndexes.includes(index)"
+      [class.selected]="selectionModel.isSelected(slide.id)"
       [class.current]="index == currentSlideIndex"
       cdkDragLockAxis="y"
-      multiselectItem
-      [item]="index"
       cdkDrag
+      multiselectItem
+      [msItem]="slide.id"
       class="slide-wrapper"
       role="button"
     >
       <div *cdkDragPreview>
-        <div *ngFor="let sel of selectedSlideIndexes"></div>
+        <div *ngFor="let selectedItem of selectionModel.selected"></div>
       </div>
       <div *cdkDragPlaceholder>
-        <div
-          style="background: #00a4ff; height: 1px; width: 100%; margin: 2px 0"
-        ></div>
+        <div class="drag-placeholder"></div>
       </div>
 
       <div class="slide">

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

@@ -65,3 +65,10 @@
     display: none;
   }
 }
+
+.drag-placeholder {
+  height: 1px;
+  width: 100%;
+  margin: 2px 0;
+  background: #00a4ff;
+}

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

@@ -3,7 +3,9 @@ import {
   ElementRef,
   HostListener,
   Input,
-  OnInit
+  OnChanges,
+  OnInit,
+  SimpleChanges
 } from '@angular/core';
 import { Location } from '@angular/common';
 import { CdkDragDrop, CdkDragStart, DragRef } from '@angular/cdk/drag-drop';
@@ -12,24 +14,35 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ContentService } from '../services/content.service';
 import { NavigationService } from '../services/navigation.service';
 import { ContentSlide } from '../types';
-import {
-  isCtrlEvent,
-  isShiftEvent
-} from '../../../../multiselect/multiselect.service';
+
+import { MultiselectModel } from '../../../../multiselect/multiselect-model';
+
+function normalizeSelectionIndexes(indexes: number[]): number[] {
+    return indexes.filter((index) => index >= 0);
+}
+
+function selectionModelToIndexes<T>(items: T[], model: MultiselectModel<T>): number[] {
+    return normalizeSelectionIndexes(model.selected.map((item) => items.indexOf(item)));
+}
+
+function slideIdsMapper(slides: ContentSlide[]): string[] {
+  return slides.map(slide => slide.id);
+}
 
 @Component({
   selector: 'slides-side-panel',
   templateUrl: './side-panel.component.html',
   styleUrls: ['./side-panel.component.scss']
 })
-export class SidePanelComponent implements OnInit {
+export class SidePanelComponent implements OnInit, OnChanges {
   @Input() slides: ContentSlide[];
   @Input() currentSlideIndex = 0;
   @Input() presentationId!: string;
 
   public dragging: DragRef = null;
   public sidePanelInFocus = false;
-  public selectedSlideIndexes: number[] = [];
+  public selectionModel: MultiselectModel<string> = new MultiselectModel();
+  public slideIds: string[] = [];
 
   constructor(
     readonly el: ElementRef,
@@ -44,6 +57,14 @@ export class SidePanelComponent implements OnInit {
     this.resetSelected();
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.slides) {
+      this.slideIds = slideIdsMapper(changes.slides.currentValue);
+
+      this.resetSelected();
+    }
+  }
+
   trackBySlideId(index: number, slide: ContentSlide) {
     return slide.id;
   }
@@ -82,11 +103,9 @@ export class SidePanelComponent implements OnInit {
     } else if (event.key === 'Delete') {
       this.contentService.deleteSlides(
         this.presentationId,
-        this.selectedSlideIndexes
+        selectionModelToIndexes(this.slideIds, this.selectionModel)
       );
 
-      this.resetSelected();
-
       event.preventDefault();
     }
   }
@@ -109,21 +128,25 @@ export class SidePanelComponent implements OnInit {
   }
 
   droppedIntoList(event: CdkDragDrop<any, any>) {
+    const selectedSlideIndexes = selectionModelToIndexes(this.slideIds, this.selectionModel);
+
     this.contentService.reorderSlides(
       this.presentationId,
-      this.selectedSlideIndexes,
-      event.currentIndex - this.selectedSlideIndexes.length + 1
+      selectedSlideIndexes,
+      event.currentIndex - selectedSlideIndexes.length + 1
     );
-
-    this.resetSelected();
   }
 
   resetSelected() {
-    this.selectedSlideIndexes = [this.currentSlideIndex];
+    this.selectSingle(this.slides[this.currentSlideIndex].id);
+  }
+
+  selectSingle(id: string) {
+    this.selectionModel.selectSingle(id);
   }
 
   select(event: MouseEvent, index: number) {
-    if (!(isShiftEvent(event) || isCtrlEvent(event)) || !this.dragging) {
+    if (!this.dragging) {
       this.navigationService.goToSlide(this.presentationId, index);
     }
   }

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

@@ -4,19 +4,25 @@ import { MULTISELECT_LIST, MultiselectListDirective } from './multiselect-list.d
 @Directive({
   selector: '[multiselectItem]'
 })
-export class MultiselectItemDirective {
+export class MultiselectItemDirective<T> {
 
-  @Input() item: number;
+  @Input() msItem: T;
 
   constructor(
-    @Inject(MULTISELECT_LIST) public parentList: MultiselectListDirective
+    @Inject(MULTISELECT_LIST) public parentList: MultiselectListDirective<T>
   ) {
 
   }
 
   @HostListener('click', ['$event'])
   private handleClickEvent(event: MouseEvent) {
-    this.parentList.multiselectService.select(event, this.item);
+    if (event.ctrlKey || event.metaKey) {
+      this.parentList.msModel.toggleSingle(this.msItem);
+    } else if (event.shiftKey) {
+      this.parentList.msModel.toggleContinuous(this.msItem);
+    } else {
+      this.parentList.msModel.selectSingle(this.msItem);
+    }
   }
 
 }

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

@@ -1,11 +1,8 @@
-import { Directive, ElementRef, EventEmitter, HostListener, InjectionToken, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Directive, ElementRef, HostListener, InjectionToken, Input, OnChanges, SimpleChanges } from '@angular/core';
 
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { MultiselectModel } from './multiselect-model';
 
-import { MultiselectService } from './multiselect.service';
-
-export const MULTISELECT_LIST = new InjectionToken<MultiselectListDirective>('MultiselectList');
+export const MULTISELECT_LIST = new InjectionToken<MultiselectListDirective<any>>('MultiselectList');
 
 @Directive({
   selector: '[multiselectList]',
@@ -14,57 +11,23 @@ export const MULTISELECT_LIST = new InjectionToken<MultiselectListDirective>('Mu
       provide: MULTISELECT_LIST,
       useExisting: MultiselectListDirective
     },
-    MultiselectService
   ]
 })
-export class MultiselectListDirective implements OnInit, OnChanges, OnDestroy {
+export class MultiselectListDirective<T> implements OnChanges {
   elementHasFocus = false;
-  @Input() items = [];
-  @Input() select = [];
-  @Output() selectChange = new EventEmitter<number[]>();
-  @Output() reset = new EventEmitter();
-  private readonly onDestroy = new Subject<void>();
+
+  @Input() msItems = [];
+  @Input() msModel: MultiselectModel<T>;
 
   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 need a better way to reset
-    // if (!this.elementHasFocus) {
-    //   this.multiselectService.resetSelection(this.currentSlideIndex);
-    // }
   }
 
   @HostListener('document:keydown', ['$event'])
@@ -74,11 +37,16 @@ export class MultiselectListDirective implements OnInit, OnChanges, OnDestroy {
     }
 
     if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
-      const allIndexes = this.items.map((_, index) => index);
-      this.multiselectService.selectAll(allIndexes);
+      this.msModel.toggleAllItems(this.msItems, true);
 
       event.preventDefault();
     }
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.msItems) {
+      this.msModel.setValues(changes.msItems.currentValue);
+    }
+  }
+
 }

apps/codelab/src/app/multiselect/multiselect-model.ts

@@ -0,0 +1,86 @@
+import { Subject } from 'rxjs';
+
+export class MultiselectModel<T> {
+
+  private selection = new Set<T>();
+
+  private stack: T[] = [];
+
+  private values: T[] = [];
+
+  changed = new Subject<T[]>();
+
+  get selected(): T[] {
+    return Array.from(this.selection.values());
+  }
+
+  setValues(values: T[]) {
+    this.values = values;
+  }
+
+  findBetween(item1: T, item2: T) {
+    const index1 = this.values.indexOf(item1);
+    const index2 = this.values.indexOf(item2);
+
+    const numberOfItems = Math.abs(index1 - index2) + 1;
+    const firstIndex = index1 < index2 ? index1 : index2;
+
+    return this.values.slice(firstIndex, firstIndex + numberOfItems);
+  }
+
+  toggleAllItems(items: T[], shouldSelect: boolean) {
+    for (const item of items) {
+      if (shouldSelect) {
+        this.selection.add(item);
+      } else {
+        this.selection.delete(item);
+      }
+    }
+
+    this.emitChangeEvent();
+  }
+
+  toggleSingle(item: T): void {
+    if (this.isSelected(item)) {
+      this.toggleAllItems([item], false);
+      this.stack = this.stack.filter(v => v !== item);
+    } else {
+      this.toggleAllItems([item], true);
+      this.stack.push(item);
+    }
+  }
+
+  toggleContinuous(item: T): void {
+    const between = this.findBetween(this.stack[this.stack.length - 1], item);
+
+    this.toggleAllItems(between, !this.isSelected(item));
+
+    this.stack.push(item);
+  }
+
+  selectSingle(item: T): void {
+    this.selection.clear();
+
+    this.toggleAllItems([item], true);
+
+    this.stack.push(item);
+  }
+
+  isSelected(item: T): boolean {
+    return this.selection.has(item);
+  }
+
+  clear(): void {
+    this.selection.clear();
+    this.emitChangeEvent();
+  }
+
+  isEmpty(): boolean {
+    return this.selection.size === 0;
+  }
+
+  emitChangeEvent(): void {
+    this.changed.next(this.selected);
+  }
+
+}