@elliemae/ds-drag-and-drop 2.2.0-alpha.2 → 2.2.0-beta.0
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/cjs/hierarchy/customCollisionDetection.js +50 -44
- package/cjs/hierarchy/getHierarchyKeyboardCoordinates.js +91 -78
- package/cjs/hierarchy/index.js +9 -28
- package/cjs/hierarchy/types.js +2 -27
- package/cjs/hierarchy/useHierarchyActionHandlers.js +35 -53
- package/cjs/hierarchy/useHierarchyAnnouncements.js +26 -45
- package/cjs/hierarchy/useHierarchyDndkitConfig.js +83 -77
- package/cjs/hierarchy/useHierarchyPreviewHandlers.js +27 -48
- package/cjs/index.js +11 -29
- package/cjs/tree/constants.js +12 -41
- package/cjs/tree/customCollisionDetection.js +95 -64
- package/cjs/tree/getTreeKeyboardCoordinates.js +101 -87
- package/cjs/tree/index.js +9 -28
- package/cjs/tree/types.js +2 -27
- package/cjs/tree/useTreeActionHandlers.js +56 -66
- package/cjs/tree/useTreeAnnouncements.js +40 -53
- package/cjs/tree/useTreeDndkitConfig.js +91 -95
- package/cjs/tree/useTreePreviewHandlers.js +37 -53
- package/cjs/tree/utilities.js +30 -44
- package/esm/hierarchy/customCollisionDetection.js +46 -15
- package/esm/hierarchy/getHierarchyKeyboardCoordinates.js +76 -42
- package/esm/hierarchy/index.js +1 -3
- package/esm/hierarchy/types.js +1 -2
- package/esm/hierarchy/useHierarchyActionHandlers.js +31 -24
- package/esm/hierarchy/useHierarchyAnnouncements.js +20 -14
- package/esm/hierarchy/useHierarchyDndkitConfig.js +66 -45
- package/esm/hierarchy/useHierarchyPreviewHandlers.js +19 -15
- package/esm/index.js +2 -4
- package/esm/tree/constants.js +10 -12
- package/esm/tree/customCollisionDetection.js +89 -33
- package/esm/tree/getTreeKeyboardCoordinates.js +84 -49
- package/esm/tree/index.js +1 -3
- package/esm/tree/types.js +1 -2
- package/esm/tree/useTreeActionHandlers.js +50 -35
- package/esm/tree/useTreeAnnouncements.js +30 -18
- package/esm/tree/useTreeDndkitConfig.js +70 -59
- package/esm/tree/useTreePreviewHandlers.js +28 -19
- package/esm/tree/utilities.js +23 -13
- package/package.json +1 -1
- package/cjs/hierarchy/customCollisionDetection.js.map +0 -7
- package/cjs/hierarchy/getHierarchyKeyboardCoordinates.js.map +0 -7
- package/cjs/hierarchy/index.js.map +0 -7
- package/cjs/hierarchy/types.js.map +0 -7
- package/cjs/hierarchy/useHierarchyActionHandlers.js.map +0 -7
- package/cjs/hierarchy/useHierarchyAnnouncements.js.map +0 -7
- package/cjs/hierarchy/useHierarchyDndkitConfig.js.map +0 -7
- package/cjs/hierarchy/useHierarchyPreviewHandlers.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/tree/constants.js.map +0 -7
- package/cjs/tree/customCollisionDetection.js.map +0 -7
- package/cjs/tree/getTreeKeyboardCoordinates.js.map +0 -7
- package/cjs/tree/index.js.map +0 -7
- package/cjs/tree/types.js.map +0 -7
- package/cjs/tree/useTreeActionHandlers.js.map +0 -7
- package/cjs/tree/useTreeAnnouncements.js.map +0 -7
- package/cjs/tree/useTreeDndkitConfig.js.map +0 -7
- package/cjs/tree/useTreePreviewHandlers.js.map +0 -7
- package/cjs/tree/utilities.js.map +0 -7
- package/esm/hierarchy/customCollisionDetection.js.map +0 -7
- package/esm/hierarchy/getHierarchyKeyboardCoordinates.js.map +0 -7
- package/esm/hierarchy/index.js.map +0 -7
- package/esm/hierarchy/types.js.map +0 -7
- package/esm/hierarchy/useHierarchyActionHandlers.js.map +0 -7
- package/esm/hierarchy/useHierarchyAnnouncements.js.map +0 -7
- package/esm/hierarchy/useHierarchyDndkitConfig.js.map +0 -7
- package/esm/hierarchy/useHierarchyPreviewHandlers.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/tree/constants.js.map +0 -7
- package/esm/tree/customCollisionDetection.js.map +0 -7
- package/esm/tree/getTreeKeyboardCoordinates.js.map +0 -7
- package/esm/tree/index.js.map +0 -7
- package/esm/tree/types.js.map +0 -7
- package/esm/tree/useTreeActionHandlers.js.map +0 -7
- package/esm/tree/useTreeAnnouncements.js.map +0 -7
- package/esm/tree/useTreeDndkitConfig.js.map +0 -7
- package/esm/tree/useTreePreviewHandlers.js.map +0 -7
- package/esm/tree/utilities.js.map +0 -7
|
@@ -1,113 +1,119 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
var import_customCollisionDetection = __toESM(require("./customCollisionDetection"));
|
|
39
|
-
var import_useHierarchyAnnouncements = __toESM(require("./useHierarchyAnnouncements"));
|
|
40
|
-
const adjustTranslate = (isHorizontalDnD) => ({ transform }) => {
|
|
41
|
-
const newTransform = {
|
|
42
|
-
...transform
|
|
43
|
-
};
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
14
|
+
var react = require('react');
|
|
15
|
+
var core = require('@dnd-kit/core');
|
|
16
|
+
var useHierarchyActionHandlers = require('./useHierarchyActionHandlers.js');
|
|
17
|
+
var useHierarchyPreviewHandlers = require('./useHierarchyPreviewHandlers.js');
|
|
18
|
+
var getHierarchyKeyboardCoordinates = require('./getHierarchyKeyboardCoordinates.js');
|
|
19
|
+
var customCollisionDetection = require('./customCollisionDetection.js');
|
|
20
|
+
var useHierarchyAnnouncements = require('./useHierarchyAnnouncements.js');
|
|
21
|
+
|
|
22
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
|
+
|
|
24
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
25
|
+
|
|
26
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
27
|
+
|
|
28
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
29
|
+
// if second parameter is true, the space will be done on the horizontal axis
|
|
30
|
+
|
|
31
|
+
const adjustTranslate = isHorizontalDnD => _ref => {
|
|
32
|
+
let {
|
|
33
|
+
transform
|
|
34
|
+
} = _ref;
|
|
35
|
+
|
|
36
|
+
const newTransform = _objectSpread({}, transform);
|
|
37
|
+
|
|
44
38
|
if (isHorizontalDnD) {
|
|
45
39
|
newTransform.y = transform.y + 15;
|
|
46
40
|
} else {
|
|
47
41
|
newTransform.y = transform.y - 35;
|
|
48
42
|
}
|
|
43
|
+
|
|
49
44
|
return newTransform;
|
|
50
45
|
};
|
|
46
|
+
|
|
51
47
|
const measuring = {
|
|
52
48
|
droppable: {
|
|
53
|
-
strategy:
|
|
49
|
+
strategy: core.MeasuringStrategy.Always
|
|
54
50
|
}
|
|
55
51
|
};
|
|
52
|
+
|
|
56
53
|
const noop = () => null;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
54
|
+
|
|
55
|
+
const useHierarchyDndkitConfig = _ref2 => {
|
|
56
|
+
var _itemsDictionary$acti;
|
|
57
|
+
|
|
58
|
+
let {
|
|
59
|
+
flattenedItems,
|
|
60
|
+
dragOverlayDataTestid,
|
|
61
|
+
isHorizontalDnD = false,
|
|
62
|
+
onReorder,
|
|
63
|
+
onPreviewResetState = noop,
|
|
64
|
+
onPreviewDragStart = noop
|
|
65
|
+
} = _ref2;
|
|
66
|
+
const [activeId, setActiveId] = react.useState('');
|
|
67
|
+
const dndItems = react.useMemo(() => flattenedItems.map(_ref3 => {
|
|
68
|
+
let [item] = _ref3;
|
|
69
|
+
return item;
|
|
70
|
+
}), [flattenedItems]);
|
|
71
|
+
const itemsDictionary = react.useMemo(() => {
|
|
68
72
|
const dictionary = {};
|
|
69
|
-
dndItems.forEach(
|
|
73
|
+
dndItems.forEach(item => {
|
|
70
74
|
dictionary[item.id] = item;
|
|
71
75
|
});
|
|
72
76
|
return dictionary;
|
|
73
77
|
}, [dndItems]);
|
|
74
|
-
const modifiers =
|
|
75
|
-
const sensorContext =
|
|
78
|
+
const modifiers = react.useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
|
|
79
|
+
const sensorContext = react.useRef({
|
|
76
80
|
items: dndItems
|
|
77
81
|
});
|
|
78
|
-
|
|
82
|
+
react.useEffect(() => {
|
|
79
83
|
sensorContext.current = {
|
|
80
84
|
items: dndItems
|
|
81
85
|
};
|
|
82
86
|
}, [dndItems]);
|
|
83
|
-
const coordinateGetter =
|
|
84
|
-
const sensors =
|
|
87
|
+
const coordinateGetter = react.useMemo(() => getHierarchyKeyboardCoordinates.getHierarchyKeyboardCoordinates(sensorContext, dragOverlayDataTestid, isHorizontalDnD), [isHorizontalDnD]);
|
|
88
|
+
const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, {
|
|
85
89
|
coordinateGetter
|
|
86
90
|
}));
|
|
87
|
-
const dragPreviewHandlers =
|
|
91
|
+
const dragPreviewHandlers = useHierarchyPreviewHandlers.useHierarchyPreviewHandlers({
|
|
88
92
|
setActiveId,
|
|
89
93
|
onPreviewResetState,
|
|
90
94
|
onPreviewDragStart
|
|
91
95
|
});
|
|
92
|
-
const dragActionHandlers = (
|
|
93
|
-
...dragPreviewHandlers,
|
|
96
|
+
const dragActionHandlers = useHierarchyActionHandlers.useHierarchyActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
|
|
94
97
|
dndItems,
|
|
95
98
|
onReorder
|
|
96
|
-
});
|
|
97
|
-
const announcements =
|
|
98
|
-
const dndContextProps =
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
}));
|
|
100
|
+
const announcements = useHierarchyAnnouncements.useHierarchyAnnouncements(itemsDictionary);
|
|
101
|
+
const dndContextProps = react.useMemo(() => {
|
|
102
|
+
var _itemsDictionary;
|
|
103
|
+
|
|
104
|
+
return _objectSpread({
|
|
105
|
+
announcements,
|
|
106
|
+
modifiers,
|
|
107
|
+
sensors,
|
|
108
|
+
measuring,
|
|
109
|
+
collisionDetection: customCollisionDetection.customCollisionDetection(activeId, (_itemsDictionary = itemsDictionary[activeId !== null && activeId !== void 0 ? activeId : '']) === null || _itemsDictionary === void 0 ? void 0 : _itemsDictionary.parentId, dndItems)
|
|
110
|
+
}, dragActionHandlers);
|
|
111
|
+
}, [announcements, modifiers, sensors, activeId, itemsDictionary, dndItems, dragActionHandlers]);
|
|
106
112
|
return {
|
|
107
113
|
dndContextProps,
|
|
108
114
|
activeId,
|
|
109
|
-
activeIndex: activeId ? itemsDictionary[activeId]
|
|
115
|
+
activeIndex: activeId ? (_itemsDictionary$acti = itemsDictionary[activeId]) === null || _itemsDictionary$acti === void 0 ? void 0 : _itemsDictionary$acti.index : -1
|
|
110
116
|
};
|
|
111
117
|
};
|
|
112
|
-
|
|
113
|
-
|
|
118
|
+
|
|
119
|
+
exports.useHierarchyDndkitConfig = useHierarchyDndkitConfig;
|
|
@@ -1,56 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var useHierarchyPreviewHandlers_exports = {};
|
|
29
|
-
__export(useHierarchyPreviewHandlers_exports, {
|
|
30
|
-
useHierarchyPreviewHandlers: () => useHierarchyPreviewHandlers
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var import_react = __toESM(require("react"));
|
|
34
|
-
const useHierarchyPreviewHandlers = ({
|
|
35
|
-
setActiveId,
|
|
36
|
-
onPreviewResetState,
|
|
37
|
-
onPreviewDragStart
|
|
38
|
-
}) => {
|
|
39
|
-
const resetState = (0, import_react.useCallback)(() => {
|
|
40
|
-
setActiveId("");
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var react = require('react');
|
|
6
|
+
|
|
7
|
+
const useHierarchyPreviewHandlers = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
setActiveId,
|
|
10
|
+
onPreviewResetState,
|
|
11
|
+
onPreviewDragStart
|
|
12
|
+
} = _ref;
|
|
13
|
+
const resetState = react.useCallback(() => {
|
|
14
|
+
setActiveId('');
|
|
41
15
|
onPreviewResetState();
|
|
42
|
-
document.body.style.setProperty(
|
|
16
|
+
document.body.style.setProperty('cursor', '');
|
|
43
17
|
}, [setActiveId, onPreviewResetState]);
|
|
44
|
-
const handlePreviewDragStart =
|
|
18
|
+
const handlePreviewDragStart = react.useCallback(_ref2 => {
|
|
19
|
+
let {
|
|
20
|
+
active: {
|
|
21
|
+
id
|
|
22
|
+
}
|
|
23
|
+
} = _ref2;
|
|
45
24
|
setActiveId(id);
|
|
46
|
-
document.body.style.setProperty(
|
|
25
|
+
document.body.style.setProperty('cursor', 'grabbing');
|
|
47
26
|
onPreviewDragStart();
|
|
48
27
|
}, [setActiveId, onPreviewDragStart]);
|
|
49
|
-
const handlePreviewDragMove =
|
|
50
|
-
const handlePreviewDragEnd =
|
|
28
|
+
const handlePreviewDragMove = react.useCallback(() => null, []);
|
|
29
|
+
const handlePreviewDragEnd = react.useCallback(() => {
|
|
51
30
|
resetState();
|
|
52
31
|
}, [resetState]);
|
|
53
|
-
const handlePreviewDragCancel =
|
|
32
|
+
const handlePreviewDragCancel = react.useCallback(() => {
|
|
54
33
|
resetState();
|
|
55
34
|
}, [resetState]);
|
|
56
35
|
return {
|
|
@@ -60,5 +39,5 @@ const useHierarchyPreviewHandlers = ({
|
|
|
60
39
|
handlePreviewDragCancel
|
|
61
40
|
};
|
|
62
41
|
};
|
|
63
|
-
|
|
64
|
-
|
|
42
|
+
|
|
43
|
+
exports.useHierarchyPreviewHandlers = useHierarchyPreviewHandlers;
|
package/cjs/index.js
CHANGED
|
@@ -1,29 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
13
|
-
}
|
|
14
|
-
return target;
|
|
15
|
-
};
|
|
16
|
-
var __toESM = (module2, isNodeMode) => {
|
|
17
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
18
|
-
};
|
|
19
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
20
|
-
return (module2, temp) => {
|
|
21
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
-
};
|
|
23
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
24
|
-
var src_exports = {};
|
|
25
|
-
var React = __toESM(require("react"));
|
|
26
|
-
__reExport(src_exports, __toESM(require("./hierarchy")));
|
|
27
|
-
__reExport(src_exports, __toESM(require("./tree")));
|
|
28
|
-
module.exports = __toCommonJS(src_exports);
|
|
29
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var useHierarchyDndkitConfig = require('./hierarchy/useHierarchyDndkitConfig.js');
|
|
6
|
+
var useTreeDndkitConfig = require('./tree/useTreeDndkitConfig.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.useHierarchyDndkitConfig = useHierarchyDndkitConfig.useHierarchyDndkitConfig;
|
|
11
|
+
exports.useTreeDndkitConfig = useTreeDndkitConfig.useTreeDndkitConfig;
|
package/cjs/tree/constants.js
CHANGED
|
@@ -1,41 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var constants_exports = {};
|
|
29
|
-
__export(constants_exports, {
|
|
30
|
-
DropIndicatorPosition: () => DropIndicatorPosition
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var DropIndicatorPosition = /* @__PURE__ */ ((DropIndicatorPosition2) => {
|
|
34
|
-
DropIndicatorPosition2[DropIndicatorPosition2["None"] = 0] = "None";
|
|
35
|
-
DropIndicatorPosition2[DropIndicatorPosition2["Before"] = 1] = "Before";
|
|
36
|
-
DropIndicatorPosition2[DropIndicatorPosition2["After"] = 2] = "After";
|
|
37
|
-
DropIndicatorPosition2[DropIndicatorPosition2["Inside"] = 3] = "Inside";
|
|
38
|
-
return DropIndicatorPosition2;
|
|
39
|
-
})(DropIndicatorPosition || {});
|
|
40
|
-
module.exports = __toCommonJS(constants_exports);
|
|
41
|
-
//# sourceMappingURL=constants.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
exports.DropIndicatorPosition = void 0;
|
|
6
|
+
|
|
7
|
+
(function (DropIndicatorPosition) {
|
|
8
|
+
DropIndicatorPosition[DropIndicatorPosition["None"] = 0] = "None";
|
|
9
|
+
DropIndicatorPosition[DropIndicatorPosition["Before"] = 1] = "Before";
|
|
10
|
+
DropIndicatorPosition[DropIndicatorPosition["After"] = 2] = "After";
|
|
11
|
+
DropIndicatorPosition[DropIndicatorPosition["Inside"] = 3] = "Inside";
|
|
12
|
+
})(exports.DropIndicatorPosition || (exports.DropIndicatorPosition = {}));
|
|
@@ -1,106 +1,137 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var customCollisionDetection_exports = {};
|
|
29
|
-
__export(customCollisionDetection_exports, {
|
|
30
|
-
customCollisionDetection: () => customCollisionDetection
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var import_constants = __toESM(require("./constants"));
|
|
34
|
-
const DUMMY_ID = "DUMMY_ID_INTERNAL_USE_ONLY";
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.find.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.find.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
10
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
11
|
+
var constants = require('./constants.js');
|
|
12
|
+
|
|
13
|
+
const DUMMY_ID = 'DUMMY_ID_INTERNAL_USE_ONLY';
|
|
35
14
|
const RECT_UP = {
|
|
36
15
|
offsetTop: -Infinity,
|
|
37
16
|
offsetLeft: 0,
|
|
17
|
+
// Doesn't matter,
|
|
38
18
|
width: 0,
|
|
39
|
-
|
|
19
|
+
// Doesn't matter
|
|
20
|
+
height: 0 // Doesn't matter
|
|
21
|
+
|
|
40
22
|
};
|
|
41
23
|
const RECT_DOWN = {
|
|
42
24
|
offsetTop: Infinity,
|
|
43
25
|
offsetLeft: 0,
|
|
26
|
+
// Doesn't matter,
|
|
44
27
|
width: 0,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
28
|
+
// Doesn't matter
|
|
29
|
+
height: 0 // Doesn't matter
|
|
30
|
+
|
|
31
|
+
}; // Percentage of height to take into consideration when looking for colliding rects
|
|
32
|
+
|
|
33
|
+
const thresholdRatio = 0.2; // Percentage to be inside
|
|
34
|
+
|
|
48
35
|
const insideThreshold = 0.7;
|
|
49
|
-
const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) =>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
let
|
|
36
|
+
const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => _ref => {
|
|
37
|
+
var _originalContainer$re;
|
|
38
|
+
|
|
39
|
+
let {
|
|
40
|
+
droppableContainers,
|
|
41
|
+
collisionRect
|
|
42
|
+
} = _ref;
|
|
43
|
+
const originalContainer = droppableContainers.find(_ref2 => {
|
|
44
|
+
let {
|
|
45
|
+
id
|
|
46
|
+
} = _ref2;
|
|
47
|
+
return id === activeId;
|
|
48
|
+
});
|
|
49
|
+
const originalRect = originalContainer === null || originalContainer === void 0 ? void 0 : (_originalContainer$re = originalContainer.rect) === null || _originalContainer$re === void 0 ? void 0 : _originalContainer$re.current; // We first check if the item was moved up or down
|
|
50
|
+
// This modifies how to search the matching colliding rect
|
|
51
|
+
|
|
52
|
+
let isUp = lastPosition === 'up';
|
|
53
|
+
|
|
53
54
|
if (originalRect) {
|
|
54
55
|
isUp = originalRect.offsetTop > collisionRect.top;
|
|
55
|
-
}
|
|
56
|
+
} // Threshold
|
|
57
|
+
|
|
58
|
+
|
|
56
59
|
const threshold = collisionRect.height * thresholdRatio;
|
|
57
60
|
let collidingContainer = null;
|
|
61
|
+
|
|
58
62
|
if (isUp) {
|
|
63
|
+
// Up -- We need to find the first rectangle downwards
|
|
59
64
|
collidingContainer = droppableContainers.reduce((firstRectDown, container) => {
|
|
60
65
|
const rect = container.rect.current;
|
|
66
|
+
|
|
61
67
|
if (rect && firstRectDown.rect.current) {
|
|
62
|
-
const {
|
|
63
|
-
|
|
68
|
+
const {
|
|
69
|
+
offsetTop: rectOffsetTop
|
|
70
|
+
} = rect;
|
|
71
|
+
const {
|
|
72
|
+
offsetTop: firstRectDownOffsetTop
|
|
73
|
+
} = firstRectDown.rect.current;
|
|
74
|
+
|
|
64
75
|
if (rectOffsetTop + threshold > collisionRect.top && rectOffsetTop < firstRectDownOffsetTop) {
|
|
65
76
|
return container;
|
|
66
77
|
}
|
|
67
78
|
}
|
|
79
|
+
|
|
68
80
|
return firstRectDown;
|
|
69
|
-
}, {
|
|
81
|
+
}, {
|
|
82
|
+
id: DUMMY_ID,
|
|
83
|
+
rect: {
|
|
84
|
+
current: RECT_DOWN
|
|
85
|
+
}
|
|
86
|
+
});
|
|
70
87
|
} else {
|
|
88
|
+
// Down -- We need to find the first rectangle upwards
|
|
71
89
|
collidingContainer = droppableContainers.reduce((firstRectUp, container) => {
|
|
72
90
|
const rect = container.rect.current;
|
|
91
|
+
|
|
73
92
|
if (rect && firstRectUp.rect.current) {
|
|
74
|
-
const {
|
|
75
|
-
|
|
93
|
+
const {
|
|
94
|
+
offsetTop: rectOffsetTop
|
|
95
|
+
} = rect;
|
|
96
|
+
const {
|
|
97
|
+
offsetTop: firstRectUpOffsetTop
|
|
98
|
+
} = firstRectUp.rect.current;
|
|
99
|
+
|
|
76
100
|
if (rectOffsetTop - threshold < collisionRect.top && rectOffsetTop > firstRectUpOffsetTop) {
|
|
77
101
|
return container;
|
|
78
102
|
}
|
|
79
103
|
}
|
|
104
|
+
|
|
80
105
|
return firstRectUp;
|
|
81
|
-
}, {
|
|
82
|
-
|
|
106
|
+
}, {
|
|
107
|
+
id: DUMMY_ID,
|
|
108
|
+
rect: {
|
|
109
|
+
current: RECT_UP
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
} // If we didn't find a match, return null
|
|
113
|
+
|
|
114
|
+
|
|
83
115
|
if (collidingContainer.id === DUMMY_ID) {
|
|
84
116
|
return null;
|
|
85
117
|
}
|
|
118
|
+
|
|
86
119
|
const collidingRect = collidingContainer.rect.current;
|
|
87
|
-
if (!collidingRect)
|
|
88
|
-
|
|
89
|
-
const [top, bottom] = [
|
|
90
|
-
|
|
91
|
-
Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)
|
|
92
|
-
];
|
|
120
|
+
if (!collidingRect) return null; // Calculate the intersection interval
|
|
121
|
+
|
|
122
|
+
const [top, bottom] = [Math.max(collisionRect.top, collidingRect.offsetTop), Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)]; // Calculate the percentage of intersection
|
|
123
|
+
|
|
93
124
|
const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;
|
|
125
|
+
|
|
94
126
|
if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== activeId) {
|
|
95
|
-
setDropIndicatorPosition(
|
|
127
|
+
setDropIndicatorPosition(constants.DropIndicatorPosition.Inside);
|
|
96
128
|
} else {
|
|
97
|
-
setDropIndicatorPosition(isUp ?
|
|
129
|
+
setDropIndicatorPosition(isUp ? constants.DropIndicatorPosition.Before : constants.DropIndicatorPosition.After);
|
|
98
130
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
setLastPosition("down");
|
|
131
|
+
|
|
132
|
+
if (isUp && lastPosition !== 'up') setLastPosition('up');else if (!isUp && lastPosition !== 'down') setLastPosition('down'); // Return the id of the match rectangle
|
|
133
|
+
|
|
103
134
|
return collidingContainer.id;
|
|
104
135
|
};
|
|
105
|
-
|
|
106
|
-
|
|
136
|
+
|
|
137
|
+
exports.customCollisionDetection = customCollisionDetection;
|