Skip to content

Commit 62f1beb

Browse files
carlosjorgercarlosjorger
committed
✨ feat: Add coordinateTransform config
1 parent 7697401 commit 62f1beb

File tree

9 files changed

+361
-341
lines changed

9 files changed

+361
-341
lines changed

‎docs/src/content/docs/es/index.mdx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Fluid DnD
33
head:
44
- tag: title
55
content: Fluid DnD 💦 Librería de Drag and Drop library para Vue
6-
description: "Fluid DnD es una solución fluida y suave de drag and drop para listas completamente animadas. Actualmente con soporte para Vue 3 y Svelte"
6+
description: "Fluid DnD es una solución fluida y suave de drag and drop para listas completamente animadas. Actualmente con soporte para Vue 3, React y Svelte"
77
template: splash
88
hero:
99
tagline: Fluid DnD es una solución fluida y suave de drag and drop para listas completamente animadas.
@@ -26,22 +26,19 @@ hero:
2626

2727
import { Card, CardGrid } from "@astrojs/starlight/components";
2828

29-
3029
## Características
3130

3231
<CardGrid>
33-
<Card title="Fácil y flexible" icon="pen">
34-
Esta librería de Vue fue creada con la intención de escribir el menor código
35-
posible a la hora de usarla y al mismo tiempo puede ser utilizada en muchos
36-
escenarios.
37-
</Card>
38-
<Card title="Limpia y animada" icon="rocket">
39-
Las funcionalidades drag and drop tienen una buena, limpia y suave animación
40-
comparada con el resto de las librerías.
41-
</Card>
42-
<Card title="Completamente documentado" icon="open-book">
43-
Se incluyo una documentación lo más completa posible para ayudarte a
44-
aprovechar esta herramienta que agrega funcionalidades de drag and drop a
45-
tus proyectos.
46-
</Card>
32+
<Card title="Fácil y flexible" icon="pen">
33+
Esta librería de Vue fue creada con la intención de escribir el menor código posible a la hora
34+
de usarla y al mismo tiempo puede ser utilizada en muchos escenarios.
35+
</Card>
36+
<Card title="Limpia y animada" icon="rocket">
37+
Las funcionalidades drag and drop tienen una buena, limpia y suave animación comparada con el
38+
resto de las librerías.
39+
</Card>
40+
<Card title="Completamente documentado" icon="open-book">
41+
Se incluyo una documentación lo más completa posible para ayudarte a aprovechar esta herramienta
42+
que agrega funcionalidades de drag and drop a tus proyectos.
43+
</Card>
4744
</CardGrid>

‎docs/src/content/docs/es/svelte/index.mdx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Fluid DnD
33
head:
44
- tag: title
55
content: Fluid DnD 💦 Librería de Drag and Drop library para Vue
6-
description: "Fluid DnD es una solución fluida y suave de drag and drop para listas completamente animadas. Actualmente con soporte para Vue 3 y Svelte"
6+
description: "Fluid DnD es una solución fluida y suave de drag and drop para listas completamente animadas. Actualmente con soporte para Vue 3, React y Svelte"
77
template: splash
88
hero:
99
tagline: Fluid DnD es una solución fluida y suave de drag and drop para listas completamente animadas.
@@ -26,22 +26,19 @@ hero:
2626

2727
import { Card, CardGrid } from "@astrojs/starlight/components";
2828

29-
3029
## Características
3130

3231
<CardGrid>
33-
<Card title="Fácil y flexible" icon="pen">
34-
Esta librería de Vue fue creada con la intención de escribir el menor código
35-
posible a la hora de usarla y al mismo tiempo puede ser utilizada en muchos
36-
escenarios.
37-
</Card>
38-
<Card title="Limpia y animada" icon="rocket">
39-
Las funcionalidades drag and drop tienen una buena, limpia y suave animación
40-
comparada con el resto de las librerías.
41-
</Card>
42-
<Card title="Completamente documentado" icon="open-book">
43-
Se incluyo una documentación lo más completa posible para ayudarte a
44-
aprovechar esta herramienta que agrega funcionalidades de drag and drop a
45-
tus proyectos.
46-
</Card>
32+
<Card title="Fácil y flexible" icon="pen">
33+
Esta librería de Vue fue creada con la intención de escribir el menor código posible a la hora
34+
de usarla y al mismo tiempo puede ser utilizada en muchos escenarios.
35+
</Card>
36+
<Card title="Limpia y animada" icon="rocket">
37+
Las funcionalidades drag and drop tienen una buena, limpia y suave animación comparada con el
38+
resto de las librerías.
39+
</Card>
40+
<Card title="Completamente documentado" icon="open-book">
41+
Se incluyo una documentación lo más completa posible para ayudarte a aprovechar esta herramienta
42+
que agrega funcionalidades de drag and drop a tus proyectos.
43+
</Card>
4744
</CardGrid>

‎docs/src/content/docs/svelte/index.mdx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ title: Fluid DnD
33
head:
44
- tag: title
55
content: Fluid DnD 💦 Drag and Drop Library for svelte
6-
description: "Official documentation for Fluid DnD, a fluid, agnostic and versatil drag and drop library for lists with current support for Vue 3 and Svelte."
6+
description: "Official documentation for Fluid DnD, a fluid, agnostic and versatil drag and drop library for lists with current support for Vue 3, React and Svelte."
77
template: splash
88
hero:
9-
tagline: "<strong>Fluid DnD</strong> is a fluid and agnostic drag and drop solution for lists, full animated. With current support for Vue 3 and Svelte."
9+
tagline: "<strong>Fluid DnD</strong> is a fluid and agnostic drag and drop solution for lists, full animated. With current support for Vue 3, React and Svelte."
1010
image:
1111
dark: ../../../assets/dark-logo.svg
1212
light: ../../../assets/logo.svg
@@ -26,22 +26,19 @@ hero:
2626

2727
import { Card, CardGrid } from "@astrojs/starlight/components";
2828

29-
3029
## Features
3130

3231
<CardGrid>
33-
<Card title="Easy and flexible" icon="pen">
34-
**Fluid DnD** is a library that was created with the intention of
35-
writing as little code as possible in order to use it and the same time can
36-
be used in many scenarios.
37-
</Card>
38-
<Card title="Clean and animated" icon="rocket">
39-
The drag and drop functionalities have a nice, clean and smooth animation
40-
compared to the rest of the libraries.
41-
</Card>
42-
<Card title="Fully Documented" icon="open-book">
43-
We’ve included a comprehensive set of documentation on **Fluid DnD** to
44-
help you take advance of this tool to add drag and drop functionalities to
45-
your projects.
46-
</Card>
32+
<Card title="Easy and flexible" icon="pen">
33+
**Fluid DnD** is a library that was created with the intention of writing as little code as
34+
possible in order to use it and the same time can be used in many scenarios.
35+
</Card>
36+
<Card title="Clean and animated" icon="rocket">
37+
The drag and drop functionalities have a nice, clean and smooth animation compared to the rest
38+
of the libraries.
39+
</Card>
40+
<Card title="Fully Documented" icon="open-book">
41+
We’ve included a comprehensive set of documentation on **Fluid DnD** to help you take advance of
42+
this tool to add drag and drop functionalities to your projects.
43+
</Card>
4744
</CardGrid>

‎docs/src/content/docs/vue/index.mdx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ title: Fluid DnD
33
head:
44
- tag: title
55
content: Fluid DnD 💦 Drag and Drop Library for Vue
6-
description: "Official documentation for Fluid DnD, a fluid, agnostic and versatil drag and drop library for lists with current support for Vue 3 and Svelte."
6+
description: "Official documentation for Fluid DnD, a fluid, agnostic and versatil drag and drop library for lists with current support for Vue 3, React and Svelte."
77
template: splash
88
hero:
9-
tagline: "<strong>Fluid DnD</strong> is a fluid and agnostic drag and drop solution for lists, full animated. With current support for Vue 3 and Svelte."
9+
tagline: "<strong>Fluid DnD</strong> is a fluid and agnostic drag and drop solution for lists, full animated. With current support for Vue 3, React and Svelte."
1010
image:
1111
dark: ../../../assets/dark-logo.svg
1212
light: ../../../assets/logo.svg
@@ -26,22 +26,19 @@ hero:
2626

2727
import { Card, CardGrid } from "@astrojs/starlight/components";
2828

29-
3029
## Features
3130

3231
<CardGrid>
33-
<Card title="Easy and flexible" icon="pen">
34-
**Fluid DnD** is a library that was created with the intention of
35-
writing as little code as possible in order to use it and the same time can
36-
be used in many scenarios.
37-
</Card>
38-
<Card title="Clean and animated" icon="rocket">
39-
The drag and drop functionalities have a nice, clean and smooth animation
40-
compared to the rest of the libraries.
41-
</Card>
42-
<Card title="Fully Documented" icon="open-book">
43-
We’ve included a comprehensive set of documentation on **Fluid DnD** to
44-
help you take advance of this tool to add drag and drop functionalities to
45-
your projects.
46-
</Card>
32+
<Card title="Easy and flexible" icon="pen">
33+
**Fluid DnD** is a library that was created with the intention of writing as little code as
34+
possible in order to use it and the same time can be used in many scenarios.
35+
</Card>
36+
<Card title="Clean and animated" icon="rocket">
37+
The drag and drop functionalities have a nice, clean and smooth animation compared to the rest
38+
of the libraries.
39+
</Card>
40+
<Card title="Fully Documented" icon="open-book">
41+
We’ve included a comprehensive set of documentation on **Fluid DnD** to help you take advance of
42+
this tool to add drag and drop functionalities to your projects.
43+
</Card>
4744
</CardGrid>

‎src/core/index.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ export const VERTICAL = 'vertical';
2424
* @public
2525
*/
2626
export type Direction = typeof HORIZONTAL | typeof VERTICAL;
27+
/**
28+
* The coordinate of the translate property of the draggred element.
29+
*/
30+
export type Coordinate = { x: number; y: number };
31+
/**
32+
* Mapping function that transforms the coordinates of the dragged element.
33+
*/
34+
export type CoordinateMap = (coordinate: Coordinate, currentElement: HTMLElement) => Coordinate;
2735
/**
2836
* Configuration of the drag and drop.
2937
* @public
@@ -89,6 +97,19 @@ export interface Config<T> {
8997
* The delay before the touchmove event is fired.
9098
*/
9199
delayBeforeTouchMoveEvent?: number;
100+
/**
101+
* List of mapping functions that transform the coordinates of the dragged element, which are applied one after another,
102+
* where the output of one mapping function becomes the input of the next.
103+
* @example
104+
* [map1, map2, map3]
105+
* means:
106+
* let y1 = map1(y0)
107+
* let y2 = map2(y1)
108+
* let finalCoordinate = map3(y2)
109+
* The default value is [(coordinate) => coordinate]
110+
* @default [(coordinate) => coordinate]
111+
*/
112+
coordinateTransform?: CoordinateMap[];
92113
}
93114
/**
94115
* onDrop event function.
@@ -166,4 +187,17 @@ export type CoreConfig<T> = {
166187
* The delay before the touchmove event is fired.
167188
*/
168189
delayBeforeTouchMoveEvent: number;
190+
/**
191+
* List of mapping functions that transform the coordinates of the dragged element, which are applied one after another,
192+
* where the output of one mapping function becomes the input of the next.
193+
* @example
194+
* [map1, map2, map3]
195+
* means:
196+
* let y1 = map1(y0)
197+
* let y2 = map2(y1)
198+
* let finalCoordinate = map3(y2)
199+
* The default value is [(coordinate) => coordinate]
200+
* @default [(coordinate) => coordinate]
201+
*/
202+
coordinateTransform: CoordinateMap[];
169203
};

‎src/core/useDraggable.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
setTranistion
88
} from './utils/SetStyles';
99
import { useTransform } from './utils/SetTransform';
10-
import { DragMouseTouchEvent, MoveEvent, OnLeaveEvent } from '../../index';
10+
import { Coordinate, DragMouseTouchEvent, MoveEvent, OnLeaveEvent } from '../../index';
1111
import { CoreConfig, DragStartEventData } from '.';
1212
import useEmitEvents from './utils/events/emitEvents';
1313
import {
@@ -55,7 +55,8 @@ export default function useDraggable<T>(
5555
onRemoveAtEvent,
5656
droppableClass,
5757
onDragStart,
58-
delayBeforeTouchMoveEvent
58+
delayBeforeTouchMoveEvent,
59+
coordinateTransform
5960
} = config;
6061
const droppableGroupClass = getClassesList(droppableGroup)
6162
.map((classGroup) => `droppable-group-${classGroup}`)
@@ -67,8 +68,8 @@ export default function useDraggable<T>(
6768
};
6869
let pagePosition = { pageX: 0, pageY: 0 };
6970
let delayTimeout: NodeJS.Timeout | undefined;
70-
let initialTouch: { x: number; y: number } | undefined;
71-
const [setTransform, updateTransformState] = useTransform(draggableElement);
71+
let initialTouch: Coordinate | undefined;
72+
const [setTransform, updateTransformState] = useTransform(draggableElement, coordinateTransform);
7273
const endDraggingState = () => {
7374
draggingState = DraggingState.NOT_DRAGGING;
7475
};

0 commit comments

Comments
 (0)