feat: initial drag ghost functionality

Author: mtsvyatkova

src/components/common/utils.spec.ts

@@ -264,6 +264,15 @@ export function simulateDragStart(node: Element) {
   );
 }
 
+export function simulateDragOver(node: Element) {
+  node.dispatchEvent(
+    new DragEvent('dragover', {
+      bubbles: true,
+      composed: true,
+    })
+  );
+}
+
 export function simulateDragEnd(node: Element) {
   node.dispatchEvent(
     new DragEvent('dragend', { bubbles: true, composed: true })

src/components/tile-manager/controllers/tile-dnd.ts

@@ -8,10 +8,18 @@ type TileDragAndDropConfig = {
   dragEnd: TileDragCallback;
   dragEnter: TileDragCallback;
   dragLeave: TileDragCallback;
+  dragOver: TileDragCallback;
   drop: TileDragCallback;
 };
 
-const DragEvents = ['dragstart', 'dragend', 'dragenter', 'dragleave', 'drop'];
+const DragEvents = [
+  'dragstart',
+  'dragend',
+  'dragenter',
+  'dragleave',
+  'dragover',
+  'drop',
+];
 
 export class TileDragAndDropController implements ReactiveController {
   public enabled = true;

src/components/tile-manager/themes/tile.base.scss

@@ -14,6 +14,11 @@
     }
 }
 
+[part~='tile-container'] {
+    width: 100%;
+    height: 100%;
+}
+
 [part~='base'] {
     width: 100%;
     height: 100%;
@@ -46,6 +51,20 @@
     }
 }
 
+[part="ghost"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(137 196 244);
+    border: 2px dashed #007bff;
+    transform: scale(0);
+
+    // transition: transform 0.5s ease-in-out;
+    z-index: 10;
+}
+
 // [part~='drag-over'] {
 //     opacity: 0.5;
 //     pointer-events: none;

src/components/tile-manager/tile-dnd.spec.ts

@@ -6,6 +6,7 @@ import { defineComponents } from '../common/definitions/defineComponents.js';
 import { first, last } from '../common/util.js';
 import {
   simulateDragEnd,
+  simulateDragOver,
   simulateDragStart,
   simulateDrop,
 } from '../common/utils.spec.js';
@@ -60,6 +61,7 @@ describe('Tile drag and drop', () => {
 
     const dragAndDrop = async (draggedTile: Element, dropTarget: Element) => {
       simulateDragStart(draggedTile);
+      simulateDragOver(dropTarget);
       simulateDrop(dropTarget);
       simulateDragEnd(draggedTile);
       await elementUpdated(tileManager);
@@ -83,29 +85,29 @@ describe('Tile drag and drop', () => {
     it('should adjust reflected tiles positions in slide mode', async () => {
       const tiles = getTiles();
       const draggedTile = first(tiles);
-      const dropTarget = tiles[2];
+      const dropTarget = tiles[1];
 
       expect(tileManager.dragMode).to.equal('slide');
       tileManager.tiles.forEach((tile, index) => {
         expect(tile.id).to.equal(`tile${index}`);
       });
       expect(draggedTile.position).to.equal(0);
-      expect(dropTarget.position).to.equal(2);
+      expect(dropTarget.position).to.equal(1);
 
       await dragAndDrop(draggedTile, dropTarget);
 
       const expectedIdsAfterDrag = [
         'tile1',
-        'tile2',
         'tile0',
+        'tile2',
         'tile3',
         'tile4',
       ];
       tileManager.tiles.forEach((tile, index) => {
         expect(tile.id).to.equal(expectedIdsAfterDrag[index]);
       });
-      expect(draggedTile.position).to.equal(2);
-      expect(dropTarget.position).to.equal(1);
+      expect(draggedTile.position).to.equal(1);
+      expect(dropTarget.position).to.equal(0);
     });
 
     it('should not change order when dragging a tile onto itself in slide mode', async () => {

src/components/tile-manager/tile-manager.spec.ts

@@ -144,12 +144,16 @@ describe('Tile Manager component', () => {
           part="resize"
         >
           <div
-            part="base draggable resizable"
+            part="tile-container"
             style="--ig-col-span:1;--ig-row-span:1;--ig-col-start:null;--ig-row-start:null;"
           >
-            <slot name="header"></slot>
-            <div part="content-container">
-              <slot></slot>
+            <div part="ghost">
+            </div>
+            <div part="base draggable resizable">
+              <slot name="header"></slot>
+              <div part="content-container">
+                <slot></slot>
+              </div>
             </div>
           </div>
         </igc-resize>`

src/components/tile-manager/tile-manager.ts

@@ -45,10 +45,12 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
     registerComponent(IgcTileManagerComponent, IgcTileComponent);
   }
 
-  private draggedItem: IgcTileComponent | null = null;
   private positionedTiles: IgcTileComponent[] = [];
   private _columnCount = 10;
 
+  /** @private @hidden @internal */
+  public draggedItem: IgcTileComponent | null = null;
+
   // @query('[part="base"]', true)
   // private _baseWrapper!: HTMLDivElement;
 
@@ -200,7 +202,6 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
 
   private handleTileDragEnd() {
     if (this.draggedItem) {
-      this.draggedItem.style.transform = ''; // Reset transformation
       this.draggedItem = null;
     }
   }
@@ -221,28 +222,6 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
         const tempPosition = draggedItem.position;
         draggedItem.position = target.position;
         target.position = tempPosition;
-      } else if (this.dragMode === 'slide') {
-        // Move dragged tile and adjust positions of affected tiles
-        const draggedPos = draggedItem.position;
-        const targetPos = target.position;
-
-        this.tiles.forEach((tile) => {
-          if (
-            draggedPos < targetPos &&
-            tile.position > draggedPos &&
-            tile.position <= targetPos
-          ) {
-            tile.position -= 1;
-          } else if (
-            draggedPos > targetPos &&
-            tile.position >= targetPos &&
-            tile.position < draggedPos
-          ) {
-            tile.position += 1;
-          }
-        });
-
-        draggedItem.position = targetPos;
       }
     }
   }

src/components/tile-manager/tile.ts

@@ -1,6 +1,6 @@
 import { ContextProvider } from '@lit/context';
 import { LitElement, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tileContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -16,6 +16,7 @@ import IgcResizeComponent from './resize-element.js';
 import { styles as shared } from './themes/shared/tile/tile.common.css.js';
 import { styles } from './themes/tile.base.css.js';
 import IgcTileHeaderComponent from './tile-header.js';
+import type IgcTileManagerComponent from './tile-manager.js';
 
 type IgcTileChangeState = {
   tile: IgcTileComponent;
@@ -60,6 +61,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   private static readonly increment = createCounter();
   private _dragController: TileDragAndDropController;
+  private _tileManager?: IgcTileManagerComponent;
   private _colSpan = 1;
   private _rowSpan = 1;
   private _colStart: number | null = null;
@@ -83,6 +85,9 @@ export default class IgcTileComponent extends EventEmitterMixin<
     initialValue: this,
   });
 
+  @query('[part="ghost"]', true)
+  public _ghost!: HTMLElement;
+
   @state()
   private _isDragging = false;
 
@@ -254,6 +259,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
       dragEnd: this.handleDragEnd,
       dragEnter: this.handleDragEnter,
       dragLeave: this.handleDragLeave,
+      dragOver: this.handleDragOver,
       drop: this.handleDragLeave,
     });
 
@@ -266,6 +272,10 @@ export default class IgcTileComponent extends EventEmitterMixin<
   public override connectedCallback() {
     super.connectedCallback();
     this.tileId = this.tileId || `tile-${IgcTileComponent.increment()}`;
+    // RIVIEW: Should we use lit context instead?
+    this._tileManager = this.closest(
+      'igc-tile-manager'
+    ) as IgcTileManagerComponent;
   }
 
   public toggleFullscreen() {
@@ -305,14 +315,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
     }
   }
 
-  private handleDragEnter() {
-    this._hasDragOver = true;
-  }
-
-  private handleDragLeave() {
-    this._hasDragOver = false;
-  }
-
   private handleDragStart(e: DragEvent) {
     const event = new CustomEvent('tileDragStart', {
       detail: { tile: this },
@@ -330,17 +332,56 @@ export default class IgcTileComponent extends EventEmitterMixin<
     this._isDragging = true;
 
     requestAnimationFrame(() => {
-      this.style.transform = 'scale(0)';
+      this._ghost.style.transform = 'scale(1)';
     });
   }
 
+  private handleDragEnter() {
+    const draggedId = this._tileManager?.draggedItem?.tileId;
+    if (this._tileManager && this.tileId !== draggedId) {
+      const draggedItem = this._tileManager.draggedItem;
+      if (this._tileManager?.dragMode === 'slide' && draggedItem) {
+        requestAnimationFrame(() => {
+          this._ghost.style.transform = 'scale(0)';
+        });
+      } else {
+        this._hasDragOver = true;
+      }
+    }
+  }
+
+  private handleDragOver() {
+    const draggedId = this._tileManager?.draggedItem?.tileId;
+    if (
+      this._tileManager &&
+      this.tileId !== draggedId &&
+      this._tileManager?.dragMode === 'slide'
+    ) {
+      const draggedItem = this._tileManager?.draggedItem;
+      const draggedPosition = draggedItem ? draggedItem.position : -1;
+      if (draggedPosition >= 0) {
+        const tempPosition = this._tileManager?.tiles[draggedPosition].position;
+        this._tileManager.tiles[draggedPosition].position = this.position;
+        this.position = tempPosition;
+      }
+    }
+  }
+
+  private handleDragLeave() {
+    this._hasDragOver = false;
+  }
+
   private handleDragEnd() {
     const event = new CustomEvent('tileDragEnd', {
       detail: { tile: this },
       bubbles: true,
     });
     this.dispatchEvent(event);
     this._isDragging = false;
+
+    requestAnimationFrame(() => {
+      this._ghost.style.transform = 'scale(0)';
+    });
   }
 
   private cacheStyles() {
@@ -533,10 +574,17 @@ export default class IgcTileComponent extends EventEmitterMixin<
     };
 
     return html`
-      <div part=${parts} .inert=${this._hasDragOver} style=${styleMap(styles)}>
-        <slot name="header"></slot>
-        <div part="content-container">
-          <slot></slot>
+      <div
+        part="tile-container"
+        .inert=${this._hasDragOver}
+        style=${styleMap(styles)}
+      >
+        <div part="ghost"></div>
+        <div part=${parts}>
+          <slot name="header"></slot>
+          <div part="content-container">
+            <slot></slot>
+          </div>
         </div>
       </div>
     `;