477 lines
17 KiB
TypeScript
477 lines
17 KiB
TypeScript
import { CdkDrag, CdkDragEnd, CdkDragMove, DragDropModule, DragRef, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
import { _getShadowRoot } from '@angular/cdk/platform';
|
|
import { CommonModule } from '@angular/common';
|
|
import { Component, ElementRef, input, output, QueryList, ViewChild, ViewChildren } from '@angular/core';
|
|
import { CommercialPropertyListing } from '../../../../../bizmatch-server/src/models/db.model';
|
|
import { environment } from '../../../environments/environment';
|
|
@Component({
|
|
selector: 'app-drag-drop-mixed',
|
|
standalone: true,
|
|
imports: [CommonModule, DragDropModule],
|
|
templateUrl: './drag-drop-mixed.component.html',
|
|
styleUrl: './drag-drop-mixed.component.scss',
|
|
})
|
|
export class DragDropMixedComponent {
|
|
@ViewChild('_container') _container!: ElementRef<HTMLDivElement>;
|
|
@ViewChildren(CdkDrag) _drags!: QueryList<CdkDrag>;
|
|
|
|
listing = input<CommercialPropertyListing>();
|
|
imageOrderChanged = output<string[]>();
|
|
imageToDelete = output<string>();
|
|
env = environment;
|
|
ts = new Date().getTime();
|
|
items: string[] = []; //[1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
private _cachedItems: string[] = []; //[1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
|
|
private _itemPositions: CachedItemPosition<DragRef>[] = [];
|
|
private _rootNode: DocumentOrShadowRoot | undefined;
|
|
private _activeItems: DragRef[] = [];
|
|
private _previousSwap = {
|
|
drag: null as DragRef | null,
|
|
deltaX: 0,
|
|
deltaY: 0,
|
|
overlaps: false,
|
|
};
|
|
private _containerStyle: CSSStyleDeclaration | null = null;
|
|
public isAnimationActive = false;
|
|
|
|
ngOnChanges() {
|
|
this.items = this.listing()?.imageOrder;
|
|
this._cachedItems = this.items.slice();
|
|
}
|
|
|
|
getImageUrl(image: string): string {
|
|
return `${this.env.imageBaseUrl}/pictures/property/${this.listing().imagePath}/${this.listing().serialId}/${image}?_ts=${this.ts}`;
|
|
}
|
|
|
|
dragStarted() {
|
|
this.start();
|
|
}
|
|
|
|
dragMoved(event: CdkDragMove) {
|
|
const item = event.source._dragRef;
|
|
this.sort(item, event.pointerPosition.x, event.pointerPosition.y, event.delta);
|
|
}
|
|
|
|
dragEnded(event: CdkDragEnd) {
|
|
this.imageOrderChanged.emit(this._cachedItems);
|
|
this.reset();
|
|
}
|
|
|
|
start() {
|
|
const dragRefs: DragRef[] = [];
|
|
|
|
this._drags.forEach(drag => {
|
|
dragRefs.push(drag._dragRef);
|
|
});
|
|
|
|
this._activeItems = dragRefs;
|
|
this._cacheItemPosition();
|
|
this.isAnimationActive = true;
|
|
}
|
|
|
|
sort(item: DragRef, pointerX: number, pointerY: number, pointerDelta: { x: number; y: number }) {
|
|
const siblings = this._itemPositions.slice();
|
|
const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);
|
|
|
|
const previousSwap = this._previousSwap;
|
|
|
|
if (newIndex === -1 || this._activeItems[newIndex] === item) {
|
|
return;
|
|
}
|
|
|
|
const toSwapWith = this._activeItems[newIndex];
|
|
|
|
if (previousSwap.drag === toSwapWith && previousSwap.overlaps && previousSwap.deltaX === pointerDelta.x && previousSwap.deltaY === pointerDelta.y) {
|
|
return;
|
|
}
|
|
|
|
const previousIndex = this.getItemIndex(item);
|
|
const siblingAtNewPosition = siblings[newIndex];
|
|
const previousPosition = siblings[previousIndex].clientRect;
|
|
const newPosition = siblingAtNewPosition.clientRect;
|
|
|
|
const delta = this.getDelta(newPosition.top, previousPosition.top, pointerDelta);
|
|
|
|
if (delta === 0) return;
|
|
if (delta === 1 && previousIndex > newIndex) return;
|
|
if (delta === -1 && previousIndex < newIndex) return;
|
|
|
|
const startIndex = Math.min(previousIndex, newIndex);
|
|
const endIndex = Math.max(previousIndex, newIndex);
|
|
|
|
let itemPositions = this._itemPositions.slice();
|
|
|
|
if (delta === 1) {
|
|
for (let i = startIndex; i < endIndex; i++) {
|
|
itemPositions = this._updateItemPosition(i, itemPositions, delta);
|
|
|
|
const newIndex = i + 1;
|
|
moveItemInArray(itemPositions, i, newIndex);
|
|
}
|
|
} else if (delta === -1) {
|
|
for (let i = endIndex; i > startIndex; i--) {
|
|
itemPositions = this._updateItemPosition(i, itemPositions, delta);
|
|
|
|
const newIndex = i - 1;
|
|
moveItemInArray(itemPositions, i, newIndex);
|
|
}
|
|
}
|
|
|
|
const threshold = getMutableClientRect(this._container.nativeElement).right;
|
|
|
|
let currentTop = itemPositions[0].clientRect.top;
|
|
|
|
for (let i = 0; i < itemPositions.length; i++) {
|
|
const itemPosition = itemPositions[i];
|
|
if (Math.round(itemPosition.clientRect.right) > Math.round(threshold)) {
|
|
const nextPosition = itemPositions[i + 1];
|
|
if (nextPosition) {
|
|
currentTop = nextPosition.clientRect.top;
|
|
}
|
|
itemPositions = this._updateItemPositionToDown(itemPositions, i);
|
|
} else if (itemPosition.clientRect.top !== currentTop) {
|
|
currentTop = itemPosition.clientRect.top;
|
|
itemPositions = this._updateItemPositionToUp(itemPositions, i);
|
|
}
|
|
}
|
|
|
|
const oldOrder = this._itemPositions.slice();
|
|
this._itemPositions = itemPositions;
|
|
moveItemInArray(this._activeItems, previousIndex, newIndex);
|
|
moveItemInArray(this._cachedItems, previousIndex, newIndex);
|
|
|
|
itemPositions.forEach((sibling, index) => {
|
|
if (oldOrder[index] === sibling) {
|
|
return;
|
|
}
|
|
|
|
const isDraggedItem = sibling.drag === item;
|
|
if (isDraggedItem) return;
|
|
const elementToOffset = sibling.drag.getRootElement();
|
|
|
|
elementToOffset.style.transform = `translate3d(${Math.round(sibling.transform.x)}px, ${Math.round(sibling.transform.y)}px, 0)`;
|
|
});
|
|
|
|
previousSwap.deltaX = pointerDelta.x;
|
|
previousSwap.deltaY = pointerDelta.y;
|
|
previousSwap.drag = toSwapWith;
|
|
previousSwap.overlaps = isInsideClientRect(newPosition, pointerX, pointerY);
|
|
}
|
|
|
|
reset() {
|
|
// ignore animation
|
|
this.isAnimationActive = false;
|
|
const previousSwap = this._previousSwap;
|
|
this.items = this._cachedItems.slice();
|
|
this._activeItems.forEach(item => {
|
|
item.reset();
|
|
});
|
|
this._itemPositions = [];
|
|
this._activeItems = [];
|
|
previousSwap.drag = null;
|
|
previousSwap.deltaX = previousSwap.deltaY = 0;
|
|
previousSwap.overlaps = false;
|
|
}
|
|
|
|
getItemIndex(item: DragRef): number {
|
|
return this._activeItems.indexOf(item);
|
|
}
|
|
|
|
getDelta(newTop: number, previousTop: number, pointerDelta: { x: number; y: number }) {
|
|
if (newTop === previousTop) {
|
|
return pointerDelta.x;
|
|
}
|
|
|
|
return newTop > previousTop ? 1 : -1;
|
|
}
|
|
|
|
private _getRootNode(): DocumentOrShadowRoot {
|
|
if (!this._rootNode) {
|
|
this._rootNode = _getShadowRoot(this._container.nativeElement) || document;
|
|
}
|
|
return this._rootNode;
|
|
}
|
|
|
|
private _cacheItemPosition() {
|
|
this._itemPositions = this._activeItems.map(drag => {
|
|
const elementToMeasure = drag.getRootElement();
|
|
return {
|
|
drag,
|
|
clientRect: getMutableClientRect(elementToMeasure),
|
|
transform: {
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
};
|
|
});
|
|
|
|
this._containerStyle = getComputedStyle(this._container.nativeElement);
|
|
}
|
|
|
|
private _updateItemPosition(currentIndex: number, siblings: CachedItemPosition<DragRef>[], delta: number) {
|
|
let siblingsUpdated = siblings.slice();
|
|
const offsetVertical = this._getOffset(currentIndex, siblingsUpdated, delta, false);
|
|
const offsetHorizontal = this._getOffset(currentIndex, siblingsUpdated, delta, true);
|
|
|
|
const immediateIndex = currentIndex + delta * 1;
|
|
const currentItem = siblingsUpdated[currentIndex];
|
|
const immediateSibling = siblingsUpdated[immediateIndex];
|
|
|
|
const currentItemUpdated: CachedItemPosition<DragRef> = {
|
|
...currentItem,
|
|
clientRect: {
|
|
...currentItem.clientRect,
|
|
x: currentItem.clientRect.x + offsetHorizontal.itemOffset,
|
|
left: currentItem.clientRect.left + offsetHorizontal.itemOffset,
|
|
right: currentItem.clientRect.right + offsetHorizontal.itemOffset,
|
|
y: currentItem.clientRect.y + offsetVertical.itemOffset,
|
|
top: currentItem.clientRect.top + offsetVertical.itemOffset,
|
|
bottom: currentItem.clientRect.bottom + offsetVertical.itemOffset,
|
|
},
|
|
transform: {
|
|
x: currentItem.transform.x + offsetHorizontal.itemOffset,
|
|
y: currentItem.transform.y + offsetVertical.itemOffset,
|
|
},
|
|
};
|
|
|
|
const immediateSiblingUpdated: CachedItemPosition<DragRef> = {
|
|
...immediateSibling,
|
|
clientRect: {
|
|
...immediateSibling.clientRect,
|
|
x: immediateSibling.clientRect.x + offsetHorizontal.siblingOffset,
|
|
left: immediateSibling.clientRect.left + offsetHorizontal.siblingOffset,
|
|
right: immediateSibling.clientRect.right + offsetHorizontal.siblingOffset,
|
|
y: immediateSibling.clientRect.y + offsetVertical.siblingOffset,
|
|
top: immediateSibling.clientRect.top + offsetVertical.siblingOffset,
|
|
bottom: immediateSibling.clientRect.bottom + offsetVertical.siblingOffset,
|
|
},
|
|
transform: {
|
|
x: immediateSibling.transform.x + offsetHorizontal.siblingOffset,
|
|
y: immediateSibling.transform.y + offsetVertical.siblingOffset,
|
|
},
|
|
};
|
|
|
|
if (offsetVertical.itemOffset !== offsetVertical.siblingOffset) {
|
|
const offset = (currentItemUpdated.clientRect.right - immediateSibling.clientRect.right) * delta;
|
|
const top = delta === 1 ? immediateSibling.clientRect.top : currentItem.clientRect.top;
|
|
|
|
const ignoreItem = delta === 1 ? immediateSibling.drag : currentItem.drag;
|
|
|
|
siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, top, offset, ignoreItem);
|
|
}
|
|
siblingsUpdated[currentIndex] = currentItemUpdated;
|
|
siblingsUpdated[immediateIndex] = immediateSiblingUpdated;
|
|
|
|
return siblingsUpdated;
|
|
}
|
|
|
|
private _updateItemPositionToUp(siblings: CachedItemPosition<DragRef>[], currentIndex: number) {
|
|
let siblingsUpdated = siblings.slice();
|
|
const immediateSibling = siblingsUpdated[currentIndex - 1];
|
|
const currentItem = siblingsUpdated[currentIndex];
|
|
|
|
const nextEmptySlotLeft = immediateSibling.clientRect.right + this.getContainerGapPixel();
|
|
|
|
const threshold = getMutableClientRect(this._container.nativeElement).right;
|
|
if (nextEmptySlotLeft + currentItem.clientRect.right - currentItem.clientRect.left <= threshold) {
|
|
const offsetLeft = nextEmptySlotLeft - currentItem.clientRect.left;
|
|
const offsetTop = immediateSibling.clientRect.top - currentItem.clientRect.top;
|
|
|
|
const nextSibling = siblingsUpdated[currentIndex + 1];
|
|
if (nextSibling) {
|
|
const offset = currentItem.clientRect.left - nextSibling.clientRect.left;
|
|
siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, currentItem.clientRect.top, offset, currentItem.drag);
|
|
}
|
|
|
|
siblingsUpdated[currentIndex] = {
|
|
...currentItem,
|
|
clientRect: {
|
|
...currentItem.clientRect,
|
|
x: nextEmptySlotLeft,
|
|
left: nextEmptySlotLeft,
|
|
right: currentItem.clientRect.right - currentItem.clientRect.left + nextEmptySlotLeft,
|
|
y: immediateSibling.clientRect.y,
|
|
top: immediateSibling.clientRect.top,
|
|
bottom: currentItem.clientRect.bottom - currentItem.clientRect.top + immediateSibling.clientRect.top,
|
|
},
|
|
transform: {
|
|
x: currentItem.transform.x + offsetLeft,
|
|
y: currentItem.transform.y + offsetTop,
|
|
},
|
|
};
|
|
}
|
|
|
|
return siblingsUpdated;
|
|
}
|
|
|
|
private _updateItemPositionToDown(siblings: CachedItemPosition<DragRef>[], currentIndex: number) {
|
|
let siblingsUpdated = siblings.slice();
|
|
const currentItem = siblingsUpdated[currentIndex];
|
|
const immediateSibling = siblingsUpdated[currentIndex + 1];
|
|
let offsetLeft = 0;
|
|
let offsetTop = 0;
|
|
|
|
if (immediateSibling) {
|
|
offsetLeft = immediateSibling.clientRect.left - currentItem.clientRect.left;
|
|
offsetTop = immediateSibling.clientRect.top - currentItem.clientRect.top;
|
|
} else {
|
|
const firstSibling = siblings.find(item => item.clientRect.top === currentItem.clientRect.top);
|
|
|
|
if (firstSibling) {
|
|
offsetLeft = firstSibling.clientRect.left - currentItem.clientRect.left;
|
|
}
|
|
|
|
offsetTop = currentItem.clientRect.bottom - currentItem.clientRect.top + this.getContainerGapPixel();
|
|
}
|
|
|
|
const currentItemUpdated: CachedItemPosition<DragRef> = {
|
|
...currentItem,
|
|
clientRect: {
|
|
...currentItem.clientRect,
|
|
x: currentItem.clientRect.x + offsetLeft,
|
|
left: currentItem.clientRect.left + offsetLeft,
|
|
right: currentItem.clientRect.right + offsetLeft,
|
|
y: currentItem.clientRect.y + offsetTop,
|
|
top: currentItem.clientRect.top + offsetTop,
|
|
bottom: currentItem.clientRect.bottom + offsetTop,
|
|
},
|
|
transform: {
|
|
x: currentItem.transform.x + offsetLeft,
|
|
y: currentItem.transform.y + offsetTop,
|
|
},
|
|
};
|
|
|
|
if (immediateSibling) {
|
|
const offset = currentItemUpdated.clientRect.right - immediateSibling.clientRect.left + this.getContainerGapPixel();
|
|
|
|
siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, immediateSibling.clientRect.top, offset);
|
|
}
|
|
|
|
siblingsUpdated[currentIndex] = currentItemUpdated;
|
|
return siblingsUpdated;
|
|
}
|
|
|
|
private _updateItemPositionHorizontalOnRow(siblings: CachedItemPosition<DragRef>[], top: number, offset: number, ignoreItem?: DragRef) {
|
|
const siblingsUpdated = siblings.slice();
|
|
|
|
siblingsUpdated
|
|
.filter(item => (!ignoreItem || item.drag !== ignoreItem) && item.clientRect.top === top)
|
|
.forEach(currentItem => {
|
|
const index = siblingsUpdated.findIndex(item => item.drag === currentItem.drag);
|
|
|
|
siblingsUpdated[index] = {
|
|
...siblingsUpdated[index],
|
|
clientRect: {
|
|
...siblingsUpdated[index].clientRect,
|
|
x: siblingsUpdated[index].clientRect.x + offset,
|
|
left: siblingsUpdated[index].clientRect.left + offset,
|
|
right: siblingsUpdated[index].clientRect.right + offset,
|
|
},
|
|
transform: {
|
|
...siblingsUpdated[index].transform,
|
|
x: siblingsUpdated[index].transform.x + offset,
|
|
},
|
|
};
|
|
});
|
|
|
|
return siblingsUpdated;
|
|
}
|
|
|
|
private _getItemIndexFromPointerPosition(item: DragRef, pointerX: number, pointerY: number) {
|
|
const elementAtPoints = this._getRootNode().elementsFromPoint(Math.floor(pointerX), Math.floor(pointerY));
|
|
|
|
const elementAtPoint = elementAtPoints.find(element => {
|
|
// ignore element is transiting
|
|
const animations = element.getAnimations();
|
|
const isTransitionRunning = animations.length > 0;
|
|
|
|
return !isTransitionRunning && this._itemPositions.some(item => item.drag.getRootElement() === element) && element !== item.getRootElement();
|
|
});
|
|
|
|
const index = elementAtPoint
|
|
? this._itemPositions.findIndex(({ drag }) => {
|
|
// Skip the item itself.
|
|
if (drag === item) {
|
|
return false;
|
|
}
|
|
|
|
const root = drag.getRootElement();
|
|
return elementAtPoint === root || root.contains(elementAtPoint);
|
|
})
|
|
: -1;
|
|
return index;
|
|
}
|
|
|
|
private _getOffset(currentIndex: number, siblings: CachedItemPosition<DragRef>[], delta: number, isHorizontal: boolean) {
|
|
const currentPosition = siblings[currentIndex].clientRect;
|
|
const immediateSibling = siblings[currentIndex + delta].clientRect;
|
|
|
|
let itemOffset = 0;
|
|
let siblingOffset = 0;
|
|
|
|
if (immediateSibling) {
|
|
const start = isHorizontal ? 'left' : 'top';
|
|
const end = isHorizontal ? 'right' : 'bottom';
|
|
|
|
if (delta === 1) {
|
|
itemOffset = immediateSibling[end] - currentPosition[end];
|
|
siblingOffset = currentPosition[start] - immediateSibling[start];
|
|
|
|
if (isHorizontal && immediateSibling[end] < currentPosition[end]) {
|
|
itemOffset = immediateSibling[start] - currentPosition[start];
|
|
}
|
|
} else {
|
|
itemOffset = immediateSibling[start] - currentPosition[start];
|
|
siblingOffset = currentPosition[end] - immediateSibling[end];
|
|
|
|
if (isHorizontal && immediateSibling[end] > currentPosition[end]) {
|
|
siblingOffset = currentPosition[start] - immediateSibling[start];
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
itemOffset,
|
|
siblingOffset,
|
|
};
|
|
}
|
|
|
|
private getContainerGapPixel() {
|
|
if (this._containerStyle && (this._containerStyle.display === 'flex' || this._containerStyle.display === 'grid')) {
|
|
return this._containerStyle.gap ? +this._containerStyle.gap.split('px')[0] : 0;
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
const getMutableClientRect = (element: Element): DOMRect => {
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
return {
|
|
top: rect.top,
|
|
right: rect.right,
|
|
bottom: rect.bottom,
|
|
left: rect.left,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
x: rect.x,
|
|
y: rect.y,
|
|
} as DOMRect;
|
|
};
|
|
|
|
const isInsideClientRect = (clientRect: DOMRect, x: number, y: number) => {
|
|
const { top, bottom, left, right } = clientRect;
|
|
return y >= top && y <= bottom && x >= left && x <= right;
|
|
};
|
|
|
|
interface CachedItemPosition<T> {
|
|
drag: T;
|
|
clientRect: DOMRect;
|
|
transform: {
|
|
x: number;
|
|
y: number;
|
|
};
|
|
}
|