Reset translate every x pixels

[yavulan]

Let’s say we have the list of items:

• Item1
• Item2
• Item3

The list is rendered from the array [1,2,3] using *ngFor directive.

Each item is draggable and we want to have the ability to swap them. So, we drag Item1 to the bottom of Item2, and change the array to [2,1,3].

The issue is now Item1 has previous translateY value but new position in the view.

See example to understand: https://stackblitz.com/edit/angular-gitter-nqpzle

Idea how can be hotfixed:

• here

@Input() resetTranslateXEvery: number;
@Input() resetTranslateYEvery: number;

• and here

if (this.resetTranslateXEvery) {
  translateX = translateX % this.resetTranslateXEvery;
}
if (this.resetTranslateYEvery) {
  translateY = translateY % this.resetTranslateYEvery;
}

[xieziyu]

@yavulan Interesting idea. But the two inputs are a little quirky in other scenarios. Dragging blocks would fly away from the mouse pointer. I prefer a more general solution. Do you have any other suggestion?

[yavulan]

I do not like this approach either.

An idea of a bit more generalized approach, where all the responsibility is on the end user:

@Input() hookTransform: (currentValues: {translate: IPosition}) => string;

and instead of this:

let value: string;

if (this.hookTransform) {
  value = this.hookTransform({translate: {x: translateX, y: translateY}});
} else {
  value = `translate(${translateX}px, ${translateY}px)`;
}

---

Or, for example:

@Input() hookTransformTranslate: (values: IPosition) => IPosition;

and

if (this.hookTransformTranslate) {
  ({x: translateX, y: translateY} = this.hookTransformTranslate({x: translateX, y: translateY}));
}