matcha-components 20.12.0 → 20.15.0

package/src/lib/matcha-drop-list/drop-list/drop-list.component.ts

@@ -0,0 +1,380 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  Renderer2,
+  OnInit,
+  OnDestroy,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  HostBinding
+} from '@angular/core';
+import { MatchaDragDirective } from '../directives/drag.directive';
+import { MatchaDropListService } from '../services/drop-list.service';
+
+export interface MatchaDropListDroppedEvent<T = any> {
+  previousIndex: number;
+  currentIndex: number;
+  item: T;
+  container: MatchaDropListComponent;
+  previousContainer?: MatchaDropListComponent;
+  data: T[];
+}
+
+export interface MatchaDropListConnectedToEvent<T = any> {
+  sourceData: T[];
+  targetData: T[];
+  item: T;
+  previousIndex: number;
+  currentIndex: number;
+}
+
+@Component({
+  selector: 'matcha-drop-list',
+  templateUrl: './drop-list.component.html',
+  standalone:false
+})
+export class MatchaDropListComponent<T = any> implements OnInit, OnDestroy, AfterContentInit {
+  @Input() matchaDropListData: T[] = [];
+  @Input() matchaDropListDisabled: boolean = false;
+  @Input() matchaDropListConnectedTo: MatchaDropListComponent[] = [];
+  @Input() matchaDropListSortingDisabled: boolean = false;
+  @Input() matchaDropListAcceptPredicate?: (item: any, sourceContainer: MatchaDropListComponent, targetContainer: MatchaDropListComponent) => boolean;
+
+  @Output() matchaDropListDropped = new EventEmitter<MatchaDropListDroppedEvent<T>>();
+
+  @ContentChildren(MatchaDragDirective) dragItems!: QueryList<MatchaDragDirective>;
+
+  @HostBinding('class.matcha-drop-list') get dropListClass() {
+    return true;
+  }
+
+  // Estado do drag
+  private currentDragItem?: MatchaDragDirective;
+  private dragStartIndex: number = -1;
+  private sourceContainer?: MatchaDropListComponent;
+
+  // Estado visual
+  public isReceivingDrag = false;
+  public showDropIndicator = false;
+  public dropIndicatorPosition = 0;
+  public canAcceptDrop = true; // Controla se pode aceitar o drop atual
+  private calculatedDropIndex = 0; // Armazenar o índice calculado durante o dragover
+
+  constructor(
+    public elementRef: ElementRef<HTMLElement>,
+    private renderer: Renderer2,
+    private dropListService: MatchaDropListService
+  ) {}
+
+  ngOnInit() {
+    this.setupDropZone();
+    // Registrar este drop zone no serviço
+    this.dropListService.registerDropZone(this.elementRef.nativeElement, this);
+  }
+
+  ngAfterContentInit() {
+    // Configurar referência do drop list para cada item drag
+    this.dragItems.forEach(dragItem => {
+      dragItem.setDropList(this);
+    });
+
+    // Monitorar mudanças nos itens drag
+    this.dragItems.changes.subscribe(() => {
+      this.dragItems.forEach(dragItem => {
+        dragItem.setDropList(this);
+      });
+    });
+  }
+
+  ngOnDestroy() {
+    // Desregistrar do serviço
+    this.dropListService.unregisterDropZone(this.elementRef.nativeElement);
+    // Cleanup automático via renderer
+  }
+
+  private setupDropZone() {
+    const element = this.elementRef.nativeElement;
+
+    this.renderer.listen(element, 'dragover', (event: DragEvent) => {
+      event.preventDefault();
+
+      // Só mostrar efeitos visuais se o item vem de outro container
+      if (this.currentDragItem && this.sourceContainer !== this) {
+        this.isReceivingDrag = true;
+      }
+
+      // Verificar se pode aceitar o drop
+      this.canAcceptDrop = this.canAcceptCurrentDrop();
+
+      if (this.canAcceptDrop) {
+        event.dataTransfer!.dropEffect = 'move';
+        // Mostrar linha indicadora
+        this.updateDropIndicator(event);
+      } else {
+        event.dataTransfer!.dropEffect = 'none';
+        this.showDropIndicator = false;
+      }
+    });
+
+    this.renderer.listen(element, 'dragenter', (event: DragEvent) => {
+      event.preventDefault();
+      // Só mostrar efeitos visuais se o item vem de outro container
+      if (this.currentDragItem && this.sourceContainer !== this) {
+        this.isReceivingDrag = true;
+      }
+    });
+
+    this.renderer.listen(element, 'dragleave', (event: DragEvent) => {
+      const rect = element.getBoundingClientRect();
+      const x = event.clientX;
+      const y = event.clientY;
+
+      // Verificar se realmente saiu do container
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+        this.isReceivingDrag = false;
+        this.showDropIndicator = false;
+      }
+    });
+
+    this.renderer.listen(element, 'drop', (event: DragEvent) => {
+      event.preventDefault();
+      this.handleDrop(event);
+    });
+  }
+
+  private updateDropIndicator(event: DragEvent) {
+    if (!this.currentDragItem) return;
+
+    const containerRect = this.elementRef.nativeElement.getBoundingClientRect();
+    const y = event.clientY - containerRect.top;
+
+    const dragItemElements = this.dragItems.toArray().map(item => item.elementRef.nativeElement);
+
+    let indicatorY = 0;
+    let dropIndex = 0;
+    let found = false;
+
+    for (let i = 0; i < dragItemElements.length; i++) {
+      const itemRect = dragItemElements[i].getBoundingClientRect();
+      const itemY = itemRect.top - containerRect.top;
+      const itemHeight = itemRect.height;
+      const itemCenter = itemY + itemHeight / 2;
+
+      if (y < itemCenter) {
+        indicatorY = itemY;
+        dropIndex = i;
+        found = true;
+        break;
+      }
+    }
+
+    if (!found && dragItemElements.length > 0) {
+      // Posicionar no final da lista
+      const lastItem = dragItemElements[dragItemElements.length - 1];
+      const lastRect = lastItem.getBoundingClientRect();
+      indicatorY = lastRect.bottom - containerRect.top;
+      dropIndex = dragItemElements.length;
+    }
+
+    // Armazenar tanto a posição visual quanto o índice calculado
+    this.dropIndicatorPosition = indicatorY;
+    this.calculatedDropIndex = dropIndex;
+    this.showDropIndicator = true;
+  }
+
+  // Métodos chamados pelo directive
+  onDragStart(dragItem: MatchaDragDirective, event: DragEvent) {
+    if (this.matchaDropListDisabled) return;
+
+    this.currentDragItem = dragItem;
+    this.sourceContainer = this;
+    this.dragStartIndex = this.getDragItemIndex(dragItem);
+
+    // Notificar containers conectados
+    this.matchaDropListConnectedTo.forEach(container => {
+      container.notifyDragStart(dragItem, this);
+    });
+  }
+
+  onDragEnd() {
+    this.currentDragItem = undefined;
+    this.sourceContainer = undefined;
+    this.dragStartIndex = -1;
+    this.isReceivingDrag = false;
+    this.showDropIndicator = false;
+    this.calculatedDropIndex = 0;
+
+    // Notificar containers conectados
+    this.matchaDropListConnectedTo.forEach(container => {
+      container.notifyDragEnd();
+    });
+  }
+
+  private handleDrop(event: DragEvent) {
+    if (!this.currentDragItem || this.matchaDropListDisabled) return;
+
+    // Verificar se pode aceitar o drop
+    if (!this.canAcceptCurrentDrop()) {
+      this.showDropIndicator = false;
+      this.isReceivingDrag = false;
+      return;
+    }
+
+    this.showDropIndicator = false;
+    this.isReceivingDrag = false;
+
+    // Usar o índice já calculado durante o dragover ao invés de recalcular
+    const dropIndex = this.calculatedDropIndex;
+
+    if (this.sourceContainer === this) {
+      // Drop na mesma lista - reordenar
+      if (!this.matchaDropListSortingDisabled && dropIndex !== this.dragStartIndex) {
+        this.reorderItems(this.dragStartIndex, dropIndex);
+      }
+    } else if (this.sourceContainer) {
+      // Drop entre listas - transferir
+      this.transferItem(this.currentDragItem, this.sourceContainer, this, dropIndex);
+    }
+  }
+
+  private reorderItems(fromIndex: number, toIndex: number) {
+    const newData = [...this.matchaDropListData];
+    const item = newData[fromIndex];
+
+    // Remover item da posição original
+    newData.splice(fromIndex, 1);
+
+    // Calcular nova posição
+    const insertIndex = toIndex > fromIndex ? toIndex - 1 : toIndex;
+
+    // Inserir na nova posição
+    newData.splice(insertIndex, 0, item);
+
+    this.matchaDropListData = newData;
+
+    // Emitir evento
+    this.matchaDropListDropped.emit({
+      previousIndex: fromIndex,
+      currentIndex: insertIndex,
+      item,
+      container: this,
+      data: this.matchaDropListData
+    });
+  }
+
+  private transferItem(dragItem: MatchaDragDirective, sourceContainer: MatchaDropListComponent, targetContainer: MatchaDropListComponent, targetIndex: number) {
+    const item = dragItem.matchaDragData;
+    const sourceIndex = sourceContainer.dragStartIndex;
+
+    // Remover do container origem
+    const sourceData = [...sourceContainer.matchaDropListData];
+    sourceData.splice(sourceIndex, 1);
+    sourceContainer.matchaDropListData = sourceData;
+
+    // Adicionar ao container destino
+    const targetData = [...targetContainer.matchaDropListData];
+    targetData.splice(targetIndex, 0, item);
+    targetContainer.matchaDropListData = targetData;
+
+    // Emitir eventos
+    targetContainer.matchaDropListDropped.emit({
+      previousIndex: sourceIndex,
+      currentIndex: targetIndex,
+      item,
+      container: targetContainer,
+      previousContainer: sourceContainer,
+      data: targetContainer.matchaDropListData
+    });
+
+    sourceContainer.matchaDropListDropped.emit({
+      previousIndex: sourceIndex,
+      currentIndex: -1,
+      item,
+      container: sourceContainer,
+      data: sourceContainer.matchaDropListData
+    });
+  }
+
+  private getDragItemIndex(dragItem: MatchaDragDirective): number {
+    return this.dragItems.toArray().indexOf(dragItem);
+  }
+
+  // Métodos para comunicação entre containers conectados
+  notifyDragStart(dragItem: MatchaDragDirective, sourceContainer: MatchaDropListComponent) {
+    this.currentDragItem = dragItem;
+    this.sourceContainer = sourceContainer;
+    this.dragStartIndex = sourceContainer.getDragItemIndex(dragItem);
+  }
+
+  notifyDragEnd() {
+    this.currentDragItem = undefined;
+    this.sourceContainer = undefined;
+    this.dragStartIndex = -1;
+    this.isReceivingDrag = false;
+    this.showDropIndicator = false;
+    this.calculatedDropIndex = 0;
+  }
+
+  private canAcceptCurrentDrop(): boolean {
+    if (!this.currentDragItem || !this.sourceContainer) {
+      return false;
+    }
+
+    if (this.matchaDropListAcceptPredicate) {
+      const sourceContainer = this.sourceContainer;
+      const targetContainer = this;
+      const item = this.currentDragItem.matchaDragData;
+      return this.matchaDropListAcceptPredicate(item, sourceContainer, targetContainer);
+    }
+    return true;
+  }
+
+  // Métodos para suporte touch/mobile
+  handleTouchDragOver(event: any) {
+    // Só mostrar efeitos visuais se o item vem de outro container
+    if (this.currentDragItem && this.sourceContainer !== this) {
+      this.isReceivingDrag = true;
+    }
+
+    // Verificar se pode aceitar o drop
+    this.canAcceptDrop = this.canAcceptCurrentDrop();
+
+    if (this.canAcceptDrop) {
+      // Mostrar linha indicadora
+      this.updateDropIndicator(event);
+    } else {
+      this.showDropIndicator = false;
+    }
+  }
+
+  handleTouchDrop(event: any, dragItem: any) {
+    if (!this.currentDragItem || this.matchaDropListDisabled) return;
+
+    // Verificar se pode aceitar o drop
+    if (!this.canAcceptCurrentDrop()) {
+      this.showDropIndicator = false;
+      this.isReceivingDrag = false;
+      return;
+    }
+
+    this.showDropIndicator = false;
+    this.isReceivingDrag = false;
+
+    // Usar o índice já calculado durante o dragover
+    const dropIndex = this.calculatedDropIndex;
+
+    if (this.sourceContainer === this) {
+      // Drop na mesma lista - reordenar
+      if (!this.matchaDropListSortingDisabled && dropIndex !== this.dragStartIndex) {
+        this.reorderItems(this.dragStartIndex, dropIndex);
+      }
+    } else if (this.sourceContainer) {
+      // Drop entre listas - transferir
+      this.transferItem(this.currentDragItem, this.sourceContainer, this, dropIndex);
+    }
+  }
+}

package/src/lib/matcha-drop-list/drop-list-argtype.ts

@@ -0,0 +1,56 @@
+export const dropListArgtypes = {
+    matchaDropListData: {
+        description: 'Array de dados para os itens da lista drag-and-drop',
+        control: 'object',
+        defaultValue: [],
+        table: {
+            type: { summary: '[]' },
+            defaultValue: { summary: '[]' },
+        },
+    },
+    matchaDropListDisabled: {
+        description: 'Desabilita toda a funcionalidade de drag-and-drop da lista',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: 'false' },
+        },
+    },
+    matchaDropListSortingDisabled: {
+        description: 'Desabilita apenas a reordenação dentro da própria lista (permite transferência entre listas)',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: 'false' },
+        },
+    },
+    matchaDropListConnectedTo: {
+        description: 'Array de outras listas conectadas que podem receber itens desta lista',
+        control: 'object',
+        defaultValue: [],
+        table: {
+            type: { summary: 'MatchaDropListComponent[]' },
+            defaultValue: { summary: '[]' },
+        },
+    },
+    matchaDropListAcceptPredicate: {
+        description: 'Função que determina se um item pode ser aceito nesta lista',
+        control: false,
+        table: {
+            type: { summary: '(item: any, sourceContainer: MatchaDropListComponent, targetContainer: MatchaDropListComponent) => boolean' },
+            defaultValue: { summary: 'undefined' },
+        },
+    },
+    // Propriedades de eventos
+    matchaDropListDropped: {
+        description: 'Evento emitido quando um item é solto na lista',
+        control: false,
+        table: {
+            type: { summary: 'EventEmitter<MatchaDropListDroppedEvent<T>>' },
+            category: 'Events',
+        },
+    },
+};
+

package/src/lib/matcha-drop-list/drop-list.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatchaDropListComponent } from './drop-list/drop-list.component';
+import { MatchaDragDirective } from './directives/drag.directive';
+import { MatchaDragHandleDirective } from './directives/drag-handle.directive';
+import { MatchaDropListService } from './services/drop-list.service';
+
+@NgModule({
+  declarations: [
+    MatchaDropListComponent,
+    MatchaDragDirective,
+    MatchaDragHandleDirective
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    MatchaDropListComponent,
+    MatchaDragDirective,
+    MatchaDragHandleDirective
+  ],
+  providers: [
+    MatchaDropListService
+  ]
+})
+export class MatchaDropListModule { }