@dnd-kit/collision 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +162 -0
- package/dist/index.d.ts +41 -0
- package/dist/index.js +130 -0
- package/package.json +43 -0
package/dist/index.cjs
ADDED
@@ -0,0 +1,162 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __defProp = Object.defineProperty;
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
+
var __export = (target, all) => {
|
7
|
+
for (var name in all)
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
+
};
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
+
for (let key of __getOwnPropNames(from))
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
+
}
|
16
|
+
return to;
|
17
|
+
};
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
19
|
+
|
20
|
+
// src/index.ts
|
21
|
+
var src_exports = {};
|
22
|
+
__export(src_exports, {
|
23
|
+
closestCenter: () => closestCenter,
|
24
|
+
defaultCollisionDetection: () => defaultCollisionDetection,
|
25
|
+
directionBiased: () => directionBiased,
|
26
|
+
pointerDistance: () => pointerDistance,
|
27
|
+
pointerIntersection: () => pointerIntersection,
|
28
|
+
shapeIntersection: () => shapeIntersection
|
29
|
+
});
|
30
|
+
module.exports = __toCommonJS(src_exports);
|
31
|
+
|
32
|
+
// src/algorithms/pointerIntersection.ts
|
33
|
+
var import_abstract = require("@dnd-kit/abstract");
|
34
|
+
var import_geometry = require("@dnd-kit/geometry");
|
35
|
+
var pointerIntersection = ({ dragOperation, droppable }) => {
|
36
|
+
const pointerCoordinates = dragOperation.position.current;
|
37
|
+
if (!pointerCoordinates) {
|
38
|
+
return null;
|
39
|
+
}
|
40
|
+
const { id } = droppable;
|
41
|
+
if (!droppable.shape) {
|
42
|
+
return null;
|
43
|
+
}
|
44
|
+
if (droppable.shape.containsPoint(pointerCoordinates)) {
|
45
|
+
const distance = import_geometry.Point.distance(droppable.shape.center, pointerCoordinates);
|
46
|
+
return {
|
47
|
+
id,
|
48
|
+
value: 1 / distance,
|
49
|
+
priority: import_abstract.CollisionPriority.High
|
50
|
+
};
|
51
|
+
}
|
52
|
+
return null;
|
53
|
+
};
|
54
|
+
|
55
|
+
// src/algorithms/shapeIntersection.ts
|
56
|
+
var import_abstract2 = require("@dnd-kit/abstract");
|
57
|
+
var import_geometry2 = require("@dnd-kit/geometry");
|
58
|
+
var shapeIntersection = ({
|
59
|
+
dragOperation,
|
60
|
+
droppable
|
61
|
+
}) => {
|
62
|
+
if (!droppable.shape) {
|
63
|
+
return null;
|
64
|
+
}
|
65
|
+
const { shape } = dragOperation;
|
66
|
+
const intersectionArea = shape == null ? void 0 : shape.current.intersectionArea(droppable.shape);
|
67
|
+
if (intersectionArea) {
|
68
|
+
const { position } = dragOperation;
|
69
|
+
const distance = import_geometry2.Point.distance(droppable.shape.center, position.current);
|
70
|
+
const value = 1 / distance;
|
71
|
+
return {
|
72
|
+
id: droppable.id,
|
73
|
+
value,
|
74
|
+
priority: import_abstract2.CollisionPriority.Normal
|
75
|
+
};
|
76
|
+
}
|
77
|
+
return null;
|
78
|
+
};
|
79
|
+
|
80
|
+
// src/algorithms/default.ts
|
81
|
+
var defaultCollisionDetection = (args) => {
|
82
|
+
var _a;
|
83
|
+
return (_a = pointerIntersection(args)) != null ? _a : shapeIntersection(args);
|
84
|
+
};
|
85
|
+
|
86
|
+
// src/algorithms/closestCenter.ts
|
87
|
+
var import_abstract3 = require("@dnd-kit/abstract");
|
88
|
+
var import_geometry3 = require("@dnd-kit/geometry");
|
89
|
+
var closestCenter = (input) => {
|
90
|
+
var _a;
|
91
|
+
const { dragOperation, droppable } = input;
|
92
|
+
const { shape, position } = dragOperation;
|
93
|
+
if (!droppable.shape) {
|
94
|
+
return null;
|
95
|
+
}
|
96
|
+
const distance = import_geometry3.Point.distance(
|
97
|
+
droppable.shape.center,
|
98
|
+
(_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
|
99
|
+
);
|
100
|
+
const value = 1 / distance;
|
101
|
+
return {
|
102
|
+
id: droppable.id,
|
103
|
+
value,
|
104
|
+
priority: import_abstract3.CollisionPriority.Low
|
105
|
+
};
|
106
|
+
};
|
107
|
+
|
108
|
+
// src/algorithms/directionBiased.ts
|
109
|
+
var import_abstract4 = require("@dnd-kit/abstract");
|
110
|
+
var import_geometry4 = require("@dnd-kit/geometry");
|
111
|
+
var directionBiased = ({
|
112
|
+
dragOperation,
|
113
|
+
droppable
|
114
|
+
}) => {
|
115
|
+
if (!droppable.shape) {
|
116
|
+
return null;
|
117
|
+
}
|
118
|
+
const { position, shape } = dragOperation;
|
119
|
+
const { direction } = position;
|
120
|
+
if (!shape) {
|
121
|
+
return null;
|
122
|
+
}
|
123
|
+
if (direction === null) {
|
124
|
+
return defaultCollisionDetection({ dragOperation, droppable });
|
125
|
+
}
|
126
|
+
const { center, boundingRectangle } = shape.current;
|
127
|
+
if (direction === "down" && boundingRectangle.bottom >= droppable.shape.center.y || direction === "up" && boundingRectangle.top <= droppable.shape.center.y || direction === "left" && boundingRectangle.left <= droppable.shape.center.x || direction === "right" && boundingRectangle.right >= droppable.shape.center.x) {
|
128
|
+
return {
|
129
|
+
id: droppable.id,
|
130
|
+
value: 1 / import_geometry4.Point.distance(droppable.shape.center, center),
|
131
|
+
priority: import_abstract4.CollisionPriority.Normal
|
132
|
+
};
|
133
|
+
}
|
134
|
+
return null;
|
135
|
+
};
|
136
|
+
|
137
|
+
// src/algorithms/pointerDistance.ts
|
138
|
+
var import_abstract5 = require("@dnd-kit/abstract");
|
139
|
+
var import_geometry5 = require("@dnd-kit/geometry");
|
140
|
+
var pointerDistance = (input) => {
|
141
|
+
const { dragOperation, droppable } = input;
|
142
|
+
const { position } = dragOperation;
|
143
|
+
if (!droppable.shape) {
|
144
|
+
return null;
|
145
|
+
}
|
146
|
+
const distance = import_geometry5.Point.distance(droppable.shape.center, position.current);
|
147
|
+
const value = 1 / distance;
|
148
|
+
return {
|
149
|
+
id: droppable.id,
|
150
|
+
value,
|
151
|
+
priority: import_abstract5.CollisionPriority.Low
|
152
|
+
};
|
153
|
+
};
|
154
|
+
// Annotate the CommonJS export names for ESM import in node:
|
155
|
+
0 && (module.exports = {
|
156
|
+
closestCenter,
|
157
|
+
defaultCollisionDetection,
|
158
|
+
directionBiased,
|
159
|
+
pointerDistance,
|
160
|
+
pointerIntersection,
|
161
|
+
shapeIntersection
|
162
|
+
});
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,41 @@
|
|
1
|
+
import { CollisionDetector } from '@dnd-kit/abstract';
|
2
|
+
export { CollisionDetector } from '@dnd-kit/abstract';
|
3
|
+
|
4
|
+
/**
|
5
|
+
* Returns the droppable that has the greatest intersection area with the
|
6
|
+
* pointer coordinates. If there are no pointer coordinates, or the pointer
|
7
|
+
* is not intersecting with any droppable, return the greatest intersection area
|
8
|
+
* between the collision shape and other intersecting droppable shapes.
|
9
|
+
*/
|
10
|
+
declare const defaultCollisionDetection: CollisionDetector;
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Returns the distance between the droppable shape and the drag operation shape.
|
14
|
+
*/
|
15
|
+
declare const closestCenter: CollisionDetector;
|
16
|
+
|
17
|
+
/**
|
18
|
+
* A high precision collision detection algorithm that detects
|
19
|
+
* whether the pointer intersects with a given droppable element.
|
20
|
+
*
|
21
|
+
* Returns the distance between the pointer coordinates and the center of the
|
22
|
+
* droppable element if the pointer is within the droppable element.
|
23
|
+
*
|
24
|
+
* Returns null if the pointer is outside of the droppable element.
|
25
|
+
*/
|
26
|
+
declare const pointerIntersection: CollisionDetector;
|
27
|
+
|
28
|
+
/**
|
29
|
+
* Returns the droppable with the greatest intersection area with
|
30
|
+
* the collision shape.
|
31
|
+
*/
|
32
|
+
declare const shapeIntersection: CollisionDetector;
|
33
|
+
|
34
|
+
declare const directionBiased: CollisionDetector;
|
35
|
+
|
36
|
+
/**
|
37
|
+
* Returns the distance between the droppable shape and the drag operation coordinates.
|
38
|
+
*/
|
39
|
+
declare const pointerDistance: CollisionDetector;
|
40
|
+
|
41
|
+
export { closestCenter, defaultCollisionDetection, directionBiased, pointerDistance, pointerIntersection, shapeIntersection };
|
package/dist/index.js
ADDED
@@ -0,0 +1,130 @@
|
|
1
|
+
// src/algorithms/pointerIntersection.ts
|
2
|
+
import { CollisionPriority } from "@dnd-kit/abstract";
|
3
|
+
import { Point } from "@dnd-kit/geometry";
|
4
|
+
var pointerIntersection = ({ dragOperation, droppable }) => {
|
5
|
+
const pointerCoordinates = dragOperation.position.current;
|
6
|
+
if (!pointerCoordinates) {
|
7
|
+
return null;
|
8
|
+
}
|
9
|
+
const { id } = droppable;
|
10
|
+
if (!droppable.shape) {
|
11
|
+
return null;
|
12
|
+
}
|
13
|
+
if (droppable.shape.containsPoint(pointerCoordinates)) {
|
14
|
+
const distance = Point.distance(droppable.shape.center, pointerCoordinates);
|
15
|
+
return {
|
16
|
+
id,
|
17
|
+
value: 1 / distance,
|
18
|
+
priority: CollisionPriority.High
|
19
|
+
};
|
20
|
+
}
|
21
|
+
return null;
|
22
|
+
};
|
23
|
+
|
24
|
+
// src/algorithms/shapeIntersection.ts
|
25
|
+
import { CollisionPriority as CollisionPriority2 } from "@dnd-kit/abstract";
|
26
|
+
import { Point as Point2 } from "@dnd-kit/geometry";
|
27
|
+
var shapeIntersection = ({
|
28
|
+
dragOperation,
|
29
|
+
droppable
|
30
|
+
}) => {
|
31
|
+
if (!droppable.shape) {
|
32
|
+
return null;
|
33
|
+
}
|
34
|
+
const { shape } = dragOperation;
|
35
|
+
const intersectionArea = shape == null ? void 0 : shape.current.intersectionArea(droppable.shape);
|
36
|
+
if (intersectionArea) {
|
37
|
+
const { position } = dragOperation;
|
38
|
+
const distance = Point2.distance(droppable.shape.center, position.current);
|
39
|
+
const value = 1 / distance;
|
40
|
+
return {
|
41
|
+
id: droppable.id,
|
42
|
+
value,
|
43
|
+
priority: CollisionPriority2.Normal
|
44
|
+
};
|
45
|
+
}
|
46
|
+
return null;
|
47
|
+
};
|
48
|
+
|
49
|
+
// src/algorithms/default.ts
|
50
|
+
var defaultCollisionDetection = (args) => {
|
51
|
+
var _a;
|
52
|
+
return (_a = pointerIntersection(args)) != null ? _a : shapeIntersection(args);
|
53
|
+
};
|
54
|
+
|
55
|
+
// src/algorithms/closestCenter.ts
|
56
|
+
import { CollisionPriority as CollisionPriority3 } from "@dnd-kit/abstract";
|
57
|
+
import { Point as Point3 } from "@dnd-kit/geometry";
|
58
|
+
var closestCenter = (input) => {
|
59
|
+
var _a;
|
60
|
+
const { dragOperation, droppable } = input;
|
61
|
+
const { shape, position } = dragOperation;
|
62
|
+
if (!droppable.shape) {
|
63
|
+
return null;
|
64
|
+
}
|
65
|
+
const distance = Point3.distance(
|
66
|
+
droppable.shape.center,
|
67
|
+
(_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
|
68
|
+
);
|
69
|
+
const value = 1 / distance;
|
70
|
+
return {
|
71
|
+
id: droppable.id,
|
72
|
+
value,
|
73
|
+
priority: CollisionPriority3.Low
|
74
|
+
};
|
75
|
+
};
|
76
|
+
|
77
|
+
// src/algorithms/directionBiased.ts
|
78
|
+
import { CollisionPriority as CollisionPriority4 } from "@dnd-kit/abstract";
|
79
|
+
import { Point as Point4 } from "@dnd-kit/geometry";
|
80
|
+
var directionBiased = ({
|
81
|
+
dragOperation,
|
82
|
+
droppable
|
83
|
+
}) => {
|
84
|
+
if (!droppable.shape) {
|
85
|
+
return null;
|
86
|
+
}
|
87
|
+
const { position, shape } = dragOperation;
|
88
|
+
const { direction } = position;
|
89
|
+
if (!shape) {
|
90
|
+
return null;
|
91
|
+
}
|
92
|
+
if (direction === null) {
|
93
|
+
return defaultCollisionDetection({ dragOperation, droppable });
|
94
|
+
}
|
95
|
+
const { center, boundingRectangle } = shape.current;
|
96
|
+
if (direction === "down" && boundingRectangle.bottom >= droppable.shape.center.y || direction === "up" && boundingRectangle.top <= droppable.shape.center.y || direction === "left" && boundingRectangle.left <= droppable.shape.center.x || direction === "right" && boundingRectangle.right >= droppable.shape.center.x) {
|
97
|
+
return {
|
98
|
+
id: droppable.id,
|
99
|
+
value: 1 / Point4.distance(droppable.shape.center, center),
|
100
|
+
priority: CollisionPriority4.Normal
|
101
|
+
};
|
102
|
+
}
|
103
|
+
return null;
|
104
|
+
};
|
105
|
+
|
106
|
+
// src/algorithms/pointerDistance.ts
|
107
|
+
import { CollisionPriority as CollisionPriority5 } from "@dnd-kit/abstract";
|
108
|
+
import { Point as Point5 } from "@dnd-kit/geometry";
|
109
|
+
var pointerDistance = (input) => {
|
110
|
+
const { dragOperation, droppable } = input;
|
111
|
+
const { position } = dragOperation;
|
112
|
+
if (!droppable.shape) {
|
113
|
+
return null;
|
114
|
+
}
|
115
|
+
const distance = Point5.distance(droppable.shape.center, position.current);
|
116
|
+
const value = 1 / distance;
|
117
|
+
return {
|
118
|
+
id: droppable.id,
|
119
|
+
value,
|
120
|
+
priority: CollisionPriority5.Low
|
121
|
+
};
|
122
|
+
};
|
123
|
+
export {
|
124
|
+
closestCenter,
|
125
|
+
defaultCollisionDetection,
|
126
|
+
directionBiased,
|
127
|
+
pointerDistance,
|
128
|
+
pointerIntersection,
|
129
|
+
shapeIntersection
|
130
|
+
};
|
package/package.json
ADDED
@@ -0,0 +1,43 @@
|
|
1
|
+
{
|
2
|
+
"name": "@dnd-kit/collision",
|
3
|
+
"type": "module",
|
4
|
+
"version": "0.0.1",
|
5
|
+
"main": "./dist/index.cjs",
|
6
|
+
"module": "./dist/index.js",
|
7
|
+
"types": "./dist/index.d.ts",
|
8
|
+
"sideEffects": false,
|
9
|
+
"license": "MIT",
|
10
|
+
"files": [
|
11
|
+
"dist/**"
|
12
|
+
],
|
13
|
+
"exports": {
|
14
|
+
".": {
|
15
|
+
"types": "./dist/index.d.ts",
|
16
|
+
"import": "./dist/index.js",
|
17
|
+
"require": "./dist/index.cjs"
|
18
|
+
}
|
19
|
+
},
|
20
|
+
"scripts": {
|
21
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --external react",
|
22
|
+
"dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
|
23
|
+
"lint": "TIMING=1 eslint src/**/*.ts* --fix",
|
24
|
+
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
|
25
|
+
},
|
26
|
+
"dependencies": {
|
27
|
+
"@dnd-kit/abstract": "*",
|
28
|
+
"@dnd-kit/geometry": "*",
|
29
|
+
"tslib": "^2.6.2"
|
30
|
+
},
|
31
|
+
"devDependencies": {
|
32
|
+
"@types/react": "^18.0.9",
|
33
|
+
"@types/react-dom": "^18.0.4",
|
34
|
+
"eslint": "^8.38.0",
|
35
|
+
"@dnd-kit/eslint-config": "*",
|
36
|
+
"react": "^18.1.0",
|
37
|
+
"tsup": "^6.7.0",
|
38
|
+
"typescript": "^5.0.4"
|
39
|
+
},
|
40
|
+
"publishConfig": {
|
41
|
+
"access": "public"
|
42
|
+
}
|
43
|
+
}
|