feature(wysiwyg): multiselect drag and drop reorder + delete slides

Author: k-belov

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

@@ -23,10 +23,10 @@ export class ContentComponent {
     })
   );
 
-  currentSlideIndex$ = this.contentService.currentSlideIndex$;
+  currentSlideIndex$ = this.navigationService.currentSlideIndex$;
 
   currentSlide$ = combineLatest([
-    this.navigationService.selectedSlide$,
+    this.navigationService.currentSlideIndex$,
     this.presentation$
   ]).pipe(
     map(([slide, presentation]) => {

apps/codelab/src/app/admin/content/presentation-editor/reducer.ts

@@ -34,6 +34,40 @@ export function reducer(
     case 'deleteSlide':
       getPresentation().slides.filter(({ id }) => id !== payload.id);
       return presentations;
+    case 'deleteSlides':
+      getPresentation().slides = getPresentation().slides.filter((slide, index) => !payload.selections.includes(index));
+
+      return presentations;
+    case 'reorderSlides':
+      const toIndex = payload.toIndex;
+      const selections = payload.selections;
+
+      const slides = getPresentation().slides;
+
+      const normalizeIndexes = (indexes, array) =>
+        indexes.filter(index => index >= 0 && index < array.length);
+
+      const normalizeToIndex = (toIndex, array, moveIndexes) =>
+        Math.min(Math.max(0, toIndex), array.length - moveIndexes.length);
+
+      const arrayMoveByIndex = (array, index, toIndex) => {
+        const indexes = Array.isArray(index) ? index : [index];
+        const normalizedIndexes = normalizeIndexes(indexes, array);
+        const normalizedToIndex = normalizeToIndex(toIndex, array, indexes);
+
+        const moveValues = normalizedIndexes.map(moveIndex => array[moveIndex]);
+
+        const dontMoveValues = array.filter(
+          (item, index) => normalizedIndexes.indexOf(index) === -1,
+        );
+
+        dontMoveValues.splice(normalizedToIndex, 0, ...moveValues);
+        return dontMoveValues;
+      };
+
+      getPresentation().slides = [...arrayMoveByIndex(slides, selections, toIndex)];
+
+      return presentations;
 
     case 'addBlock': {
       const slide = getSlide();

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -136,6 +136,29 @@ export class ContentService implements OnDestroy {
     this.dispatch(presentationId, action);
   }
 
+  deleteSlides(presentationId: string, selections: number[]) {
+    const action = {
+      type: 'deleteSlides',
+      payload: {
+        selections
+      }
+    };
+
+    this.dispatch(presentationId, action);
+  }
+
+  reorderSlides(presentationId: string, selections: number[], toIndex: number) {
+    const action = {
+      type: 'reorderSlides',
+      payload: {
+        selections,
+        toIndex
+      }
+    };
+
+    this.dispatch(presentationId, action);
+  }
+
   addBlock(presentationId: string, slideId: string, block: ContentBlock) {
     const action = {
       type: 'addBlock',

apps/codelab/src/app/admin/content/presentation-editor/services/navigation.service.ts

@@ -8,11 +8,11 @@ import { take } from 'rxjs/operators';
   providedIn: 'root'
 })
 export class NavigationService {
-  private readonly selectedSlideSubject = new BehaviorSubject(0);
+  private readonly currentSlideIndexSubject = new BehaviorSubject(0);
   private readonly selectedPresentationIdSubject = new BehaviorSubject<
     string | undefined
   >(undefined);
-  public selectedSlide$ = this.selectedSlideSubject.asObservable();
+  public currentSlideIndex$ = this.currentSlideIndexSubject.asObservable();
   public selectedPresentationId$ = this.selectedPresentationIdSubject.asObservable();
 
   constructor(
@@ -24,7 +24,7 @@ export class NavigationService {
     const params =
       router.routerState.snapshot.root.firstChild.firstChild.firstChild.params;
     this.selectedPresentationIdSubject.next(params.presentation);
-    this.selectedSlideSubject.next(params.slide);
+    this.currentSlideIndexSubject.next(Number(params.slide));
   }
 
   goToPresentation(presentationId: string) {
@@ -34,18 +34,18 @@ export class NavigationService {
 
   goToSlide(presentationId: string, index: number) {
     if (index >= 0) {
-      this.selectedSlideSubject.next(index);
+      this.currentSlideIndexSubject.next(index);
       this.location.replaceState(
         'admin/content/' + presentationId + '/' + index
       );
     }
   }
 
   nextSlide(presentationId: string) {
-    this.goToSlide(presentationId, this.selectedSlideSubject.value + 1);
+    this.goToSlide(presentationId, this.currentSlideIndexSubject.value + 1);
   }
 
   previousSlide(presentationId: string) {
-    this.goToSlide(presentationId, this.selectedSlideSubject.value - 1);
+    this.goToSlide(presentationId, this.currentSlideIndexSubject.value - 1);
   }
 }

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

@@ -0,0 +1,108 @@
+import { Injectable } from '@angular/core';
+
+import { BehaviorSubject } from 'rxjs';
+
+export function isCtrlEvent(event: MouseEvent) {
+  return event.metaKey || event.ctrlKey;
+}
+
+export function isShiftEvent(event: MouseEvent) {
+  return event.shiftKey;
+}
+
+@Injectable()
+export class MultiSelectionService {
+
+  public selections$ = new BehaviorSubject<number[]>([]);
+  public selections: number[] = [];
+
+  public lastSingleSelection: number | null = null;
+
+  constructor() {
+  }
+
+  isAlreadySelected(index: number): boolean {
+    return this.selections.indexOf(index) >= 0;
+  }
+
+  normalizeSelections(indexes: number[]): number[] {
+    return indexes.sort((a, b) => a - b);
+  }
+
+  isSelectionEmpty(): boolean {
+    return this.selections.length < 1;
+  }
+
+  setSelections(indexes: number[]) {
+    this.selections = this.normalizeSelections(indexes);
+    this.selections$.next(this.selections);
+  }
+
+  addToSelections(index: number) {
+    if (!this.isAlreadySelected(index)) {
+      this.setSelections([...this.selections, index]);
+    }
+  }
+
+  select(event: MouseEvent, selectedIndex: number) {
+    const shiftSelect = isShiftEvent(event) &&
+      (this.lastSingleSelection || this.lastSingleSelection === 0) &&
+      this.lastSingleSelection !== selectedIndex;
+
+    if (this.isSelectionEmpty()) {
+
+      this.setSelections([selectedIndex]);
+      this.lastSingleSelection = selectedIndex;
+
+    } else if (isCtrlEvent(event)) {
+
+      const alreadySelected = this.isAlreadySelected(selectedIndex);
+
+      if (alreadySelected) {
+        const selectionsWithoutSelectedIndex = this.selections.filter((index) => index !== selectedIndex);
+
+        if (selectionsWithoutSelectedIndex.length > 0) {
+          this.setSelections(selectionsWithoutSelectedIndex);
+        } else  {
+          this.setSelections([selectedIndex]);
+          this.lastSingleSelection = selectedIndex;
+        }
+      } else {
+        this.setSelections([...this.selections, selectedIndex]);
+        this.lastSingleSelection = selectedIndex;
+      }
+
+    } else if (shiftSelect) {
+
+      const newSelectionBefore = selectedIndex < this.lastSingleSelection;
+      const count = (
+        newSelectionBefore
+          ? this.lastSingleSelection - (selectedIndex - 1)
+          : (selectedIndex + 1) - this.lastSingleSelection
+      );
+
+      const shiftSelection = new Array(count)
+        .fill(0)
+        .map((_, index) => newSelectionBefore
+          ? this.lastSingleSelection - index
+          : this.lastSingleSelection + index
+        );
+
+      this.setSelections([...shiftSelection]);
+
+    } else {
+      this.resetSelection(selectedIndex);
+    }
+  }
+
+  resetSelection(currentIndex: number) {
+    this.lastSingleSelection = currentIndex;
+
+    this.setSelections([currentIndex]);
+  }
+
+  selectAll(indexes: number[]) {
+    this.setSelections(indexes);
+  }
+
+}

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

@@ -1,21 +1,34 @@
 <div class="slides-wrapper">
   <button (click)="addSlide()">Add</button>
 
-  <div (cdkDropListDropped)="reorder.emit($event)" cdkDropList>
-    <button
-      inert
-      (click)="this.navigationService.goToSlide(presentationId, i)"
-      *ngFor="let slide of slides; let i = index"
-      [class.selected]="i === currentSlideIndex"
+  <div (cdkDropListDropped)="droppedIntoList($event)" [class.dragging]="dragging" cdkDropList>
+    <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.current]="index == currentSlideIndex"
+      cdkDragLockAxis="y"
+      cdkDrag
       class="slide-wrapper"
+      role="button"
     >
-      <div cdkDrag class="slide">
+      <div *cdkDragPreview>
+        <div *ngFor="let sel of multiSelectionService.selections"></div>
+      </div>
+      <div *cdkDragPlaceholder>
+        <div style="background: #00a4ff; height: 1px; width: 100%; margin: 2px 0"></div>
+      </div>
+
+      <div class="slide">
         <slides-slide-preview
-          [class.selected]="i === currentSlideIndex"
+          inert
           [slide]="slide"
           mode="preview"
         ></slides-slide-preview>
       </div>
-    </button>
+    </div>
   </div>
 </div>

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

@@ -5,16 +5,22 @@
 }
 
 .slides-wrapper {
-  overflow: scroll;
+  overflow-y: scroll;
   display: flex;
   flex-direction: column;
-  width: 114px;
+  width: 200px;
   height: 100%;
   padding: 0 4px;
   box-shadow: 1px 0 2px 0 #ddd;
   background: #f8f8f8;
 }
 
+.slide-wrapper.current {
+  border: 1px #ddd solid;
+  box-shadow: 0 0 2px 1px #155ad0;
+  outline: none;
+}
+
 .slide-wrapper.selected {
   background: #dde;
 }
@@ -23,7 +29,7 @@
   display: flex;
   justify-content: space-around;
   width: 100%;
-  min-height: 40px;
+  min-height: 150px;
   padding: 4px 20px;
   box-sizing: border-box;
   border: 1px solid #ddd;
@@ -53,3 +59,9 @@
     zoom: 0.2;
   }
 }
+
+.dragging {
+  .slide-wrapper.selected:not(.cdk-drag-placeholder) {
+    display: none;
+  }
+}