feat: reorder slides with aside thumbnails

studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss

@@ -13,7 +13,33 @@ app-slides-aside {
 
   --preview-width: calc(var(--slides-aside-width) - 32px);
 
+  &.drag {
+    app-slide-thumbnail {
+      transition: margin 0.25s ease-out, min-height 0.25s ease-in;
+    }
+  }
+
   app-slide-thumbnail {
     margin-bottom: 16px;
+
+    transition: margin 0.15s ease-in;
+
+    &.hover {
+      margin-bottom: calc((var(--slides-aside-width) - 32px) * 9 / 16);
+    }
+
+    &.hover-top {
+      margin-top: calc((var(--slides-aside-width) - 32px) * 9 / 16);
+    }
+
+    &.drag-start, &.drag-hover {
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    &.drag-hover {
+      min-height: 0;
+      border: none;
+    }
   }
 }

studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx

@@ -1,4 +1,6 @@
-import {Component, Listen, h, Host, State, Prop} from '@stencil/core';
+import {Component, Listen, h, Host, State, Prop, Event, EventEmitter} from '@stencil/core';
+
+import {ItemReorderEventDetail} from '@ionic/core';
 
 import {debounce} from '@deckdeckgo/utils';
 
@@ -16,6 +18,12 @@ export class AppSlidesAside {
   @Prop()
   deckRef!: HTMLDeckgoDeckElement;
 
+  @Event()
+  private reorder: EventEmitter<ItemReorderEventDetail>;
+
+  @State()
+  private reorderDetail: ItemReorderEventDetail | undefined = undefined;
+
   private readonly debounceUpdateAllSlides: () => void;
 
   private readonly debounceUpdateSlide: (updateSlide: HTMLElement) => void;
@@ -67,16 +75,88 @@ export class AppSlidesAside {
       .map((slide: HTMLElement) => slide.cloneNode(true) as HTMLElement);
   }
 
+  private onDragStart(from: number) {
+    this.reorderDetail = {
+      from,
+      to: undefined,
+      complete: () => {}
+    };
+  }
+
+  private onDragHover(to: number) {
+    if (!this.reorderDetail) {
+      return;
+    }
+
+    this.reorderDetail = {
+      ...this.reorderDetail,
+      to
+    };
+  }
+
+  private onDragLeave() {
+    if (!this.reorderDetail) {
+      return;
+    }
+
+    if (this.reorderDetail.to !== 0) {
+      return;
+    }
+
+    this.reorderDetail = {
+      ...this.reorderDetail,
+      to: -1
+    };
+  }
+
+  private onDrop() {
+    if (!this.reorderDetail || this.reorderDetail.to === undefined) {
+      return;
+    }
+
+    const {from, to, complete} = this.reorderDetail;
+    const detail = {
+      from,
+      to: from > to ? to + 1 : to,
+      complete
+    };
+
+    this.reorder.emit(detail);
+
+    this.slides.splice(detail.to, 0, ...this.slides.splice(detail.from, 1));
+    this.slides = [...this.slides];
+
+    this.reorderDetail = undefined;
+  }
+
   render() {
     return (
-      <Host>
+      <Host
+        onDrop={() => this.onDrop()}
+        onDragOver={($event: DragEvent) => $event.preventDefault()}
+        onDragLeave={() => this.onDragLeave()}
+        class={this.reorderDetail !== undefined ? 'drag' : ''}>
         {this.slides.map((slide: HTMLElement, index: number) => (
           <app-slide-thumbnail
             custom-tappable
             onClick={async () => await slideTo(index)}
             key={slide.getAttribute('slide_id')}
             slide={slide}
-            deck={this.deckRef}></app-slide-thumbnail>
+            deck={this.deckRef}
+            class={
+              index === this.reorderDetail?.to && this.reorderDetail?.from !== this.reorderDetail?.to
+                ? 'hover'
+                : index === 0 && this.reorderDetail?.to === -1
+                ? 'hover-top'
+                : index === this.reorderDetail?.from
+                ? index === this.reorderDetail?.to
+                  ? 'drag-start'
+                  : 'drag-hover'
+                : ''
+            }
+            draggable={true}
+            onDragStart={() => this.onDragStart(index)}
+            onDragOver={() => this.onDragHover(index)}></app-slide-thumbnail>
         ))}
       </Host>
     );

studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss

@@ -50,7 +50,7 @@ app-actions-editor {
     aside {
       height: 100%;
 
-      padding: 16px 0;
+      padding: 8px 0;
 
       display: flex;
       flex-direction: column;

studio/src/app/handlers/editor/events/remote/remote-events.handler.ts

@@ -9,6 +9,8 @@ import {ConnectionState, DeckdeckgoDeckDefinition, DeckdeckgoEventDeckRequest, D
 import {EnvironmentDeckDeckGoConfig} from '../../../../types/core/environment-config';
 import {EnvironmentConfigService} from '../../../../services/environment/environment-config.service';
 
+import {deckSelector} from '../../../../utils/editor/deck.utils';
+
 import {RemoteService} from '../../../../services/editor/remote/remote.service';
 
 export class RemoteEventsHandler {
@@ -74,7 +76,7 @@ export class RemoteEventsHandler {
       });
     }
 
-    const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+    const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
     if (deck) {
       deck.removeEventListener('slidesDidLoad', async ($event: CustomEvent) => {
@@ -171,7 +173,7 @@ export class RemoteEventsHandler {
         return;
       }
 
-      const deck = this.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck) {
         resolve();
@@ -208,7 +210,7 @@ export class RemoteEventsHandler {
     return new Promise<void>(async (resolve) => {
       const deckgoRemoteElement = this.el.querySelector('deckgo-remote');
 
-      const deck = this.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deckgoRemoteElement || !deck) {
         resolve();
@@ -233,7 +235,7 @@ export class RemoteEventsHandler {
 
   private youtubePlayPause($event) {
     return new Promise<void>(async (resolve) => {
-      const deck = this.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck) {
         resolve();
@@ -261,7 +263,7 @@ export class RemoteEventsHandler {
 
   private initSlidesDidLoadListener() {
     return new Promise<void>(async (resolve) => {
-      const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck) {
         resolve();
@@ -294,7 +296,7 @@ export class RemoteEventsHandler {
 
   private initDeckMove() {
     return new Promise<void>(async (resolve) => {
-      const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck) {
         resolve();
@@ -421,7 +423,7 @@ export class RemoteEventsHandler {
 
     await deckgoRemoteElement.connect();
 
-    const deckElement: HTMLDeckgoDeckElement | null = this.el.querySelector('deckgo-deck');
+    const deckElement: HTMLDeckgoDeckElement | null = document.querySelector(deckSelector);
 
     if (!deckElement) {
       return;
@@ -452,7 +454,7 @@ export class RemoteEventsHandler {
 
   private updateRemoteSlidesOnSlidesDidLoad($event: CustomEvent): Promise<void> {
     return new Promise<void>(async (resolve) => {
-      const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck || !$event || !$event.detail || !deck.hasChildNodes()) {
         resolve();
@@ -475,7 +477,7 @@ export class RemoteEventsHandler {
 
   updateRemoteSlidesOnMutation(): Promise<void> {
     return new Promise<void>(async (resolve) => {
-      const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck || !deck.hasChildNodes()) {
         resolve();
@@ -496,7 +498,7 @@ export class RemoteEventsHandler {
 
   private updateRemoteDeckWithDefinition(self): Promise<void> {
     return new Promise<void>(async (resolve) => {
-      const deck: HTMLElement = self.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck || !deck.hasChildNodes()) {
         resolve();
@@ -521,7 +523,7 @@ export class RemoteEventsHandler {
 
   private updateCurrentSlideWithDefinition(self): Promise<void> {
     return new Promise<void>(async (resolve) => {
-      const deck: HTMLElement = self.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck || !deck.hasChildNodes()) {
         resolve();
@@ -545,7 +547,7 @@ export class RemoteEventsHandler {
         return;
       }
 
-      const deck: HTMLElement = self.el.querySelector('deckgo-deck');
+      const deck: HTMLDeckgoDeckElement = document.querySelector(deckSelector);
 
       if (!deck || !deck.hasChildNodes()) {
         resolve();

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -334,7 +334,7 @@ export class AppEditor {
   private async concatSlide(extraSlide: JSX.IntrinsicElements) {
     this.slides = [...this.slides, extraSlide];
 
-    await ParseDeckSlotsUtils.stickLastChildren(this.el);
+    await ParseDeckSlotsUtils.stickLastChildren(this.mainRef);
   }
 
   private async replaceSlide(slide: JSX.IntrinsicElements) {
@@ -683,34 +683,28 @@ export class AppEditor {
     await this.reorderSlides($event.detail);
   }
 
-  private reorderSlides(detail: ItemReorderEventDetail): Promise<void> {
-    return new Promise<void>(async (resolve) => {
-      if (!detail) {
-        resolve();
-        return;
-      }
-
-      try {
-        await this.deckEventsHandler.updateDeckSlidesOrder(detail);
+  private async reorderSlides(detail: ItemReorderEventDetail) {
+    if (!detail) {
+      return;
+    }
 
-        if (detail.from < 0 || detail.to < 0 || !this.slides || detail.to >= this.slides.length || detail.from === detail.to) {
-          resolve();
-          return;
-        }
+    if (detail.from < 0 || detail.to < 0 || !this.slides || detail.to >= this.slides.length || detail.from === detail.to) {
+      return;
+    }
 
-        await this.remoteEventsHandler.updateRemoteSlidesOnMutation();
+    try {
+      await this.deckEventsHandler.updateDeckSlidesOrder(detail);
 
-        this.slides.splice(detail.to, 0, ...this.slides.splice(detail.from, 1));
-        this.slides = [...this.slides];
-      } catch (err) {
-        // We ignore the error here
-      }
+      await this.remoteEventsHandler.updateRemoteSlidesOnMutation();
 
-      // Finish the reorder and position the item in the DOM based on where the gesture ended. This method can also be called directly by the reorder group
-      detail.complete();
+      this.slides.splice(detail.to, 0, ...this.slides.splice(detail.from, 1));
+      this.slides = [...this.slides];
+    } catch (err) {
+      // We ignore the error here
+    }
 
-      resolve();
-    });
+    // Finish the reorder and position the item in the DOM based on where the gesture ended. This method can also be called directly by the reorder group
+    detail.complete();
   }
 
   private async updatePresenting(presenting: boolean) {

studio/src/app/popovers/editor/app-slide-navigate/app-slide-navigate.tsx

@@ -18,7 +18,8 @@ export class AppSlideNavigate {
   @State()
   private slides: string[];
 
-  @Event() private reorder: EventEmitter<ItemReorderEventDetail>;
+  @Event()
+  private reorder: EventEmitter<ItemReorderEventDetail>;
 
   async componentDidLoad() {
     history.pushState({modal: true}, null);

studio/src/components.d.ts

@@ -1692,6 +1692,7 @@ declare namespace LocalJSX {
     }
     interface AppSlidesAside {
         "deckRef": HTMLDeckgoDeckElement;
+        "onReorder"?: (event: CustomEvent<ItemReorderEventDetail>) => void;
     }
     interface AppSlotType {
         "onSelectType"?: (event: CustomEvent<SlotType | null>) => void;