ngx-explorer-dnd
Version:
## _Drag & Drop in Angular like in a desktop explorer!_
119 lines (118 loc) • 6.16 kB
TypeScript
import { EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit } from '@angular/core';
import { Translate3DPosition } from '../core/utils';
import { DndService } from '../services/dnd.service';
import { NgxExplorerItemDirective } from './ngx-explorer-item.directive';
import { NgxExplorerTargetDirective } from './ngx-explorer-target.directive';
import * as i0 from "@angular/core";
export declare const EXPLORER_DND_CONTAINER: InjectionToken<NgxExplorerContainerDirective<any>>;
export declare class NgxExplorerContainerDirective<T = any> implements OnInit, OnDestroy {
private _ngZone;
private _document;
private dndService;
/** The current dragged element from type `NgxExplorerItemDirective`. */
private _currentDragElement;
/** The current target element from type `NgxExplorerTargetDirective`. */
private _currentTargetElement;
/** The registered elements as array from type `NgxExplorerItemDirective`. */
private _dragElements;
/** The generated deep clone preview element. */
private previewElement;
/** If drag startet. */
private dragStarted;
/** Check if the current element can be moved with the intern `isMinRangeMoved` method. */
private canMove;
/** The position of the dragged element. */
private position;
/** If sorting is enabled the new position of the dragged element is stored here to handle correct drop animation. */
private positionDifference;
/** The start position of the mouse when beginning dragging. */
private startPosition;
/** A unsorted list of all registered components */
private unsortedItems;
/** A sorted list of all registered components (sorted by position in the DOM) */
private sortedItems;
/** Event emitted when the drag progress was started. */
dragInProgress: EventEmitter<boolean>;
/** Event emitted when the files are dropped with `mouseup`. */
drop: EventEmitter<{
item: any;
target: any;
optionalDragData?: any;
oldIndex?: number;
newIndex?: number;
}>;
/** Event emitted when a target under the mouse will change */
targetChange: EventEmitter<{
target: any;
}>;
/** Set optional data to the dragged element. */
dragData: any;
/** Set a optional badge to the dragged element e.g. 2 if you drag multiple files. */
badge: string | null;
/** Cancel move back animation after `mouseup` event */
cancelAnimation: boolean;
/** Can the file/folder components are sorted */
sortingEnabled: boolean;
/** Deep clone the current element for a preview element. */
deepCloneNode(node: HTMLElement, badge?: string): HTMLElement;
/** Hide/show the dragged component */
toggleVisibility(element: HTMLElement, visible: boolean): void;
/** Creates a list with all registered components and their positions */
createUnsortedList(): any[];
/** Gets the registered items in the list, sorted by their position in the DOM. */
getSortedItems(): any[];
/** Check if the element has a translate3d style and returns the "real" values of x, y, width and height. */
getCurrentPositionInclusiveTranslate3d(element: HTMLElement): Translate3DPosition;
/** Checks goes the new position of the element outside of the parent and set new row position */
needToMoveUpOrDown(parentRect: DOMRect, indexOfElement: number, addDirection: number): {
transX: string;
transY: string;
} | boolean;
/** Set the position of the dragged element */
setCurrentPositionOfDraggedElement(draggedElement: HTMLElement | undefined, mousePosition: {
x: number;
y: number;
}): void;
/** Removes the transform3d positions from all elements */
resetPositions(draggedElement: HTMLElement | undefined): void;
/** Set the position of the preview element */
setPreviewElementPosition(posX: number, posY: number): void;
/** Dragging start if the pressed mouse moved the min range. */
isMinRangeMoved(posX: number, posY: number): boolean;
/** Check if element is inside rect. */
checkIfElementInsideRect(rect: any, selectionBorder: {
x: number;
y: number;
width: number;
height: number;
}): boolean;
/** Get all elements of type `NgxExplorerItemDirective` from an event. */
getTargetHandle(event: Event): NgxExplorerItemDirective | undefined;
/** Get all elements of type `NgxExplorerItemDirective` from a HTMLElement. */
getTargetHandleFromHTMLElement(element: HTMLElement): HTMLElement | undefined;
/** Get the current index of the dragged element in the unsorted list */
getCurrentIndexPosition(lastMouseX: number, lastMouseY: number, draggedElement: HTMLElement): {
x: number;
y: number;
oldIndex: number;
newIndex: number;
} | undefined;
/** Returns a list of all elements of type `NgxExplorerItemDirective` they are inside a specific rect. */
getElementsInsideSelectionDiv(x: number, y: number, width: number, height: number): NgxExplorerItemDirective[];
/** Initialize all event listener. */
initAll(): this;
/** Remove all event listener. */
clearAll(): void;
constructor(_ngZone: NgZone, _document: Document, dndService: DndService);
ngOnInit(): void;
ngOnDestroy(): void;
private onMouseDown;
private onMouseMove;
private onMouseUp;
/** `ngx-explorer-item` will call this method to register itself. */
addDragElement(element: NgxExplorerItemDirective): void;
/** `ngx-explorer-target` will call this method to register itself as target on mouseenter */
setCurrentTarget(element: NgxExplorerTargetDirective | null): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxExplorerContainerDirective<any>, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgxExplorerContainerDirective<any>, "[ngxExplorerDndContainer]", never, { "dragData": "dragData"; "badge": "badge"; "cancelAnimation": "cancelAnimation"; "sortingEnabled": "sortingEnabled"; }, { "dragInProgress": "dragInProgress"; "drop": "drop"; "targetChange": "targetChange"; }, never, never, false, never>;
}