@headless-tree/core 1.2.0 → 1.3.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/CHANGELOG.md +27 -0
- package/dist/index.d.mts +577 -0
- package/dist/index.d.ts +577 -0
- package/dist/index.js +2321 -0
- package/dist/index.mjs +2276 -0
- package/package.json +18 -10
- package/src/core/create-tree.ts +26 -2
- package/src/features/async-data-loader/feature.ts +9 -4
- package/src/features/async-data-loader/types.ts +2 -0
- package/src/features/checkboxes/checkboxes.spec.ts +149 -0
- package/src/features/checkboxes/feature.ts +134 -0
- package/src/features/checkboxes/types.ts +29 -0
- package/src/features/drag-and-drop/drag-and-drop.spec.ts +11 -2
- package/src/features/drag-and-drop/feature.ts +88 -17
- package/src/features/drag-and-drop/types.ts +22 -0
- package/src/features/keyboard-drag-and-drop/feature.ts +8 -1
- package/src/features/keyboard-drag-and-drop/keyboard-drag-and-drop.spec.ts +34 -3
- package/src/features/sync-data-loader/feature.ts +5 -1
- package/src/features/tree/feature.ts +9 -3
- package/src/features/tree/tree.spec.ts +14 -4
- package/src/features/tree/types.ts +3 -2
- package/src/index.ts +2 -0
- package/src/test-utils/test-tree-do.ts +2 -0
- package/src/test-utils/test-tree.ts +1 -0
- package/src/types/core.ts +2 -0
- package/tsconfig.json +1 -4
- package/vitest.config.ts +3 -1
- package/lib/cjs/core/build-proxified-instance.d.ts +0 -2
- package/lib/cjs/core/build-proxified-instance.js +0 -58
- package/lib/cjs/core/build-static-instance.d.ts +0 -2
- package/lib/cjs/core/build-static-instance.js +0 -26
- package/lib/cjs/core/create-tree.d.ts +0 -2
- package/lib/cjs/core/create-tree.js +0 -182
- package/lib/cjs/features/async-data-loader/feature.d.ts +0 -2
- package/lib/cjs/features/async-data-loader/feature.js +0 -135
- package/lib/cjs/features/async-data-loader/types.d.ts +0 -47
- package/lib/cjs/features/async-data-loader/types.js +0 -2
- package/lib/cjs/features/drag-and-drop/feature.d.ts +0 -2
- package/lib/cjs/features/drag-and-drop/feature.js +0 -179
- package/lib/cjs/features/drag-and-drop/types.d.ts +0 -66
- package/lib/cjs/features/drag-and-drop/types.js +0 -9
- package/lib/cjs/features/drag-and-drop/utils.d.ts +0 -27
- package/lib/cjs/features/drag-and-drop/utils.js +0 -182
- package/lib/cjs/features/expand-all/feature.d.ts +0 -2
- package/lib/cjs/features/expand-all/feature.js +0 -70
- package/lib/cjs/features/expand-all/types.d.ts +0 -19
- package/lib/cjs/features/expand-all/types.js +0 -2
- package/lib/cjs/features/hotkeys-core/feature.d.ts +0 -2
- package/lib/cjs/features/hotkeys-core/feature.js +0 -107
- package/lib/cjs/features/hotkeys-core/types.d.ts +0 -27
- package/lib/cjs/features/hotkeys-core/types.js +0 -2
- package/lib/cjs/features/keyboard-drag-and-drop/feature.d.ts +0 -2
- package/lib/cjs/features/keyboard-drag-and-drop/feature.js +0 -206
- package/lib/cjs/features/keyboard-drag-and-drop/types.d.ts +0 -27
- package/lib/cjs/features/keyboard-drag-and-drop/types.js +0 -11
- package/lib/cjs/features/main/types.d.ts +0 -45
- package/lib/cjs/features/main/types.js +0 -2
- package/lib/cjs/features/prop-memoization/feature.d.ts +0 -2
- package/lib/cjs/features/prop-memoization/feature.js +0 -70
- package/lib/cjs/features/prop-memoization/types.d.ts +0 -15
- package/lib/cjs/features/prop-memoization/types.js +0 -2
- package/lib/cjs/features/renaming/feature.d.ts +0 -2
- package/lib/cjs/features/renaming/feature.js +0 -86
- package/lib/cjs/features/renaming/types.d.ts +0 -27
- package/lib/cjs/features/renaming/types.js +0 -2
- package/lib/cjs/features/search/feature.d.ts +0 -2
- package/lib/cjs/features/search/feature.js +0 -119
- package/lib/cjs/features/search/types.d.ts +0 -32
- package/lib/cjs/features/search/types.js +0 -2
- package/lib/cjs/features/selection/feature.d.ts +0 -2
- package/lib/cjs/features/selection/feature.js +0 -132
- package/lib/cjs/features/selection/types.d.ts +0 -21
- package/lib/cjs/features/selection/types.js +0 -2
- package/lib/cjs/features/sync-data-loader/feature.d.ts +0 -2
- package/lib/cjs/features/sync-data-loader/feature.js +0 -49
- package/lib/cjs/features/sync-data-loader/types.d.ts +0 -28
- package/lib/cjs/features/sync-data-loader/types.js +0 -2
- package/lib/cjs/features/tree/feature.d.ts +0 -2
- package/lib/cjs/features/tree/feature.js +0 -240
- package/lib/cjs/features/tree/types.d.ts +0 -62
- package/lib/cjs/features/tree/types.js +0 -2
- package/lib/cjs/index.d.ts +0 -31
- package/lib/cjs/index.js +0 -49
- package/lib/cjs/mddocs-entry.d.ts +0 -121
- package/lib/cjs/mddocs-entry.js +0 -17
- package/lib/cjs/test-utils/test-tree-do.d.ts +0 -23
- package/lib/cjs/test-utils/test-tree-do.js +0 -112
- package/lib/cjs/test-utils/test-tree-expect.d.ts +0 -17
- package/lib/cjs/test-utils/test-tree-expect.js +0 -66
- package/lib/cjs/test-utils/test-tree.d.ts +0 -48
- package/lib/cjs/test-utils/test-tree.js +0 -207
- package/lib/cjs/types/core.d.ts +0 -83
- package/lib/cjs/types/core.js +0 -2
- package/lib/cjs/types/deep-merge.d.ts +0 -13
- package/lib/cjs/types/deep-merge.js +0 -2
- package/lib/cjs/utilities/create-on-drop-handler.d.ts +0 -3
- package/lib/cjs/utilities/create-on-drop-handler.js +0 -20
- package/lib/cjs/utilities/errors.d.ts +0 -2
- package/lib/cjs/utilities/errors.js +0 -9
- package/lib/cjs/utilities/insert-items-at-target.d.ts +0 -3
- package/lib/cjs/utilities/insert-items-at-target.js +0 -40
- package/lib/cjs/utilities/remove-items-from-parents.d.ts +0 -2
- package/lib/cjs/utilities/remove-items-from-parents.js +0 -32
- package/lib/cjs/utils.d.ts +0 -6
- package/lib/cjs/utils.js +0 -53
- package/lib/esm/core/build-proxified-instance.d.ts +0 -2
- package/lib/esm/core/build-proxified-instance.js +0 -54
- package/lib/esm/core/build-static-instance.d.ts +0 -2
- package/lib/esm/core/build-static-instance.js +0 -22
- package/lib/esm/core/create-tree.d.ts +0 -2
- package/lib/esm/core/create-tree.js +0 -178
- package/lib/esm/features/async-data-loader/feature.d.ts +0 -2
- package/lib/esm/features/async-data-loader/feature.js +0 -132
- package/lib/esm/features/async-data-loader/types.d.ts +0 -47
- package/lib/esm/features/async-data-loader/types.js +0 -1
- package/lib/esm/features/drag-and-drop/feature.d.ts +0 -2
- package/lib/esm/features/drag-and-drop/feature.js +0 -176
- package/lib/esm/features/drag-and-drop/types.d.ts +0 -66
- package/lib/esm/features/drag-and-drop/types.js +0 -6
- package/lib/esm/features/drag-and-drop/utils.d.ts +0 -27
- package/lib/esm/features/drag-and-drop/utils.js +0 -172
- package/lib/esm/features/expand-all/feature.d.ts +0 -2
- package/lib/esm/features/expand-all/feature.js +0 -67
- package/lib/esm/features/expand-all/types.d.ts +0 -19
- package/lib/esm/features/expand-all/types.js +0 -1
- package/lib/esm/features/hotkeys-core/feature.d.ts +0 -2
- package/lib/esm/features/hotkeys-core/feature.js +0 -104
- package/lib/esm/features/hotkeys-core/types.d.ts +0 -27
- package/lib/esm/features/hotkeys-core/types.js +0 -1
- package/lib/esm/features/keyboard-drag-and-drop/feature.d.ts +0 -2
- package/lib/esm/features/keyboard-drag-and-drop/feature.js +0 -203
- package/lib/esm/features/keyboard-drag-and-drop/types.d.ts +0 -27
- package/lib/esm/features/keyboard-drag-and-drop/types.js +0 -8
- package/lib/esm/features/main/types.d.ts +0 -45
- package/lib/esm/features/main/types.js +0 -1
- package/lib/esm/features/prop-memoization/feature.d.ts +0 -2
- package/lib/esm/features/prop-memoization/feature.js +0 -67
- package/lib/esm/features/prop-memoization/types.d.ts +0 -15
- package/lib/esm/features/prop-memoization/types.js +0 -1
- package/lib/esm/features/renaming/feature.d.ts +0 -2
- package/lib/esm/features/renaming/feature.js +0 -83
- package/lib/esm/features/renaming/types.d.ts +0 -27
- package/lib/esm/features/renaming/types.js +0 -1
- package/lib/esm/features/search/feature.d.ts +0 -2
- package/lib/esm/features/search/feature.js +0 -116
- package/lib/esm/features/search/types.d.ts +0 -32
- package/lib/esm/features/search/types.js +0 -1
- package/lib/esm/features/selection/feature.d.ts +0 -2
- package/lib/esm/features/selection/feature.js +0 -129
- package/lib/esm/features/selection/types.d.ts +0 -21
- package/lib/esm/features/selection/types.js +0 -1
- package/lib/esm/features/sync-data-loader/feature.d.ts +0 -2
- package/lib/esm/features/sync-data-loader/feature.js +0 -46
- package/lib/esm/features/sync-data-loader/types.d.ts +0 -28
- package/lib/esm/features/sync-data-loader/types.js +0 -1
- package/lib/esm/features/tree/feature.d.ts +0 -2
- package/lib/esm/features/tree/feature.js +0 -237
- package/lib/esm/features/tree/types.d.ts +0 -62
- package/lib/esm/features/tree/types.js +0 -1
- package/lib/esm/index.d.ts +0 -31
- package/lib/esm/index.js +0 -30
- package/lib/esm/mddocs-entry.d.ts +0 -121
- package/lib/esm/mddocs-entry.js +0 -1
- package/lib/esm/test-utils/test-tree-do.d.ts +0 -23
- package/lib/esm/test-utils/test-tree-do.js +0 -108
- package/lib/esm/test-utils/test-tree-expect.d.ts +0 -17
- package/lib/esm/test-utils/test-tree-expect.js +0 -62
- package/lib/esm/test-utils/test-tree.d.ts +0 -48
- package/lib/esm/test-utils/test-tree.js +0 -203
- package/lib/esm/types/core.d.ts +0 -83
- package/lib/esm/types/core.js +0 -1
- package/lib/esm/types/deep-merge.d.ts +0 -13
- package/lib/esm/types/deep-merge.js +0 -1
- package/lib/esm/utilities/create-on-drop-handler.d.ts +0 -3
- package/lib/esm/utilities/create-on-drop-handler.js +0 -16
- package/lib/esm/utilities/errors.d.ts +0 -2
- package/lib/esm/utilities/errors.js +0 -4
- package/lib/esm/utilities/insert-items-at-target.d.ts +0 -3
- package/lib/esm/utilities/insert-items-at-target.js +0 -36
- package/lib/esm/utilities/remove-items-from-parents.d.ts +0 -2
- package/lib/esm/utilities/remove-items-from-parents.js +0 -28
- package/lib/esm/utils.d.ts +0 -6
- package/lib/esm/utils.js +0 -46
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { canDrop, getDragCode, getDragTarget, isOrderedDragTarget, } from "./utils";
|
|
11
|
-
import { makeStateUpdater } from "../../utils";
|
|
12
|
-
export const dragAndDropFeature = {
|
|
13
|
-
key: "drag-and-drop",
|
|
14
|
-
deps: ["selection"],
|
|
15
|
-
getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree), canReorder: true }, defaultConfig)),
|
|
16
|
-
stateHandlerNames: {
|
|
17
|
-
dnd: "setDndState",
|
|
18
|
-
},
|
|
19
|
-
treeInstance: {
|
|
20
|
-
getDragTarget: ({ tree }) => {
|
|
21
|
-
var _a, _b;
|
|
22
|
-
return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
|
|
23
|
-
},
|
|
24
|
-
getDragLineData: ({ tree }) => {
|
|
25
|
-
var _a, _b, _c, _d, _e, _f;
|
|
26
|
-
const target = tree.getDragTarget();
|
|
27
|
-
const indent = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
|
|
28
|
-
const treeBb = (_b = tree.getElement()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
|
|
29
|
-
if (!target || !treeBb || !isOrderedDragTarget(target))
|
|
30
|
-
return null;
|
|
31
|
-
const leftOffset = target.dragLineLevel * ((_c = tree.getConfig().indent) !== null && _c !== void 0 ? _c : 1);
|
|
32
|
-
const targetItem = tree.getItems()[target.dragLineIndex];
|
|
33
|
-
if (!targetItem) {
|
|
34
|
-
const bb = (_e = (_d = tree
|
|
35
|
-
.getItems()[target.dragLineIndex - 1]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
|
|
36
|
-
if (bb) {
|
|
37
|
-
return {
|
|
38
|
-
indent,
|
|
39
|
-
top: bb.bottom - treeBb.top,
|
|
40
|
-
left: bb.left + leftOffset - treeBb.left,
|
|
41
|
-
width: bb.width - leftOffset,
|
|
42
|
-
};
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
const bb = (_f = targetItem.getElement()) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect();
|
|
46
|
-
if (bb) {
|
|
47
|
-
return {
|
|
48
|
-
indent,
|
|
49
|
-
top: bb.top - treeBb.top,
|
|
50
|
-
left: bb.left + leftOffset - treeBb.left,
|
|
51
|
-
width: bb.width - leftOffset,
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
return null;
|
|
55
|
-
},
|
|
56
|
-
getDragLineStyle: ({ tree }, topOffset = -1, leftOffset = -8) => {
|
|
57
|
-
const dragLine = tree.getDragLineData();
|
|
58
|
-
return dragLine
|
|
59
|
-
? {
|
|
60
|
-
position: "absolute",
|
|
61
|
-
top: `${dragLine.top + topOffset}px`,
|
|
62
|
-
left: `${dragLine.left + leftOffset}px`,
|
|
63
|
-
width: `${dragLine.width - leftOffset}px`,
|
|
64
|
-
pointerEvents: "none", // important to prevent capturing drag events
|
|
65
|
-
}
|
|
66
|
-
: { display: "none" };
|
|
67
|
-
},
|
|
68
|
-
getContainerProps: ({ prev }, treeLabel) => {
|
|
69
|
-
const prevProps = prev === null || prev === void 0 ? void 0 : prev(treeLabel);
|
|
70
|
-
return Object.assign(Object.assign({}, prevProps), { style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
itemInstance: {
|
|
74
|
-
getProps: ({ tree, item, prev }) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { draggable: true, onDragStart: (e) => {
|
|
75
|
-
var _a, _b, _c;
|
|
76
|
-
const selectedItems = tree.getSelectedItems();
|
|
77
|
-
const items = selectedItems.includes(item) ? selectedItems : [item];
|
|
78
|
-
const config = tree.getConfig();
|
|
79
|
-
if (!selectedItems.includes(item)) {
|
|
80
|
-
tree.setSelectedItems([item.getItemMeta().itemId]);
|
|
81
|
-
}
|
|
82
|
-
if (!((_b = (_a = config.canDrag) === null || _a === void 0 ? void 0 : _a.call(config, items)) !== null && _b !== void 0 ? _b : true)) {
|
|
83
|
-
e.preventDefault();
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
if (config.createForeignDragObject) {
|
|
87
|
-
const { format, data } = config.createForeignDragObject(items);
|
|
88
|
-
(_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData(format, data);
|
|
89
|
-
}
|
|
90
|
-
tree.applySubStateUpdate("dnd", {
|
|
91
|
-
draggedItems: items,
|
|
92
|
-
draggingOverItem: tree.getFocusedItem(),
|
|
93
|
-
});
|
|
94
|
-
}, onDragOver: (e) => {
|
|
95
|
-
var _a, _b, _c;
|
|
96
|
-
const dataRef = tree.getDataRef();
|
|
97
|
-
const nextDragCode = getDragCode(e, item, tree);
|
|
98
|
-
if (nextDragCode === dataRef.current.lastDragCode) {
|
|
99
|
-
if (dataRef.current.lastAllowDrop) {
|
|
100
|
-
e.preventDefault();
|
|
101
|
-
}
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
dataRef.current.lastDragCode = nextDragCode;
|
|
105
|
-
const target = getDragTarget(e, item, tree);
|
|
106
|
-
if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
|
|
107
|
-
(!e.dataTransfer ||
|
|
108
|
-
!((_c = (_b = tree
|
|
109
|
-
.getConfig()).canDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(_b, e.dataTransfer, target)))) {
|
|
110
|
-
dataRef.current.lastAllowDrop = false;
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
if (!canDrop(e.dataTransfer, target, tree)) {
|
|
114
|
-
dataRef.current.lastAllowDrop = false;
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
|
|
118
|
-
dataRef.current.lastAllowDrop = true;
|
|
119
|
-
e.preventDefault();
|
|
120
|
-
}, onDragLeave: () => {
|
|
121
|
-
const dataRef = tree.getDataRef();
|
|
122
|
-
dataRef.current.lastDragCode = "no-drag";
|
|
123
|
-
tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
|
|
124
|
-
}, onDragEnd: (e) => {
|
|
125
|
-
var _a, _b, _c, _d;
|
|
126
|
-
const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
|
|
127
|
-
tree.applySubStateUpdate("dnd", null);
|
|
128
|
-
if (((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
|
-
(_d = (_c = tree.getConfig()).onCompleteForeignDrop) === null || _d === void 0 ? void 0 : _d.call(_c, draggedItems);
|
|
132
|
-
}, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
|
|
133
|
-
var _a, _b, _c;
|
|
134
|
-
const dataRef = tree.getDataRef();
|
|
135
|
-
const target = getDragTarget(e, item, tree);
|
|
136
|
-
if (!canDrop(e.dataTransfer, target, tree)) {
|
|
137
|
-
return;
|
|
138
|
-
}
|
|
139
|
-
e.preventDefault();
|
|
140
|
-
const config = tree.getConfig();
|
|
141
|
-
const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
|
|
142
|
-
dataRef.current.lastDragCode = undefined;
|
|
143
|
-
tree.applySubStateUpdate("dnd", null);
|
|
144
|
-
if (draggedItems) {
|
|
145
|
-
yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
|
|
146
|
-
}
|
|
147
|
-
else if (e.dataTransfer) {
|
|
148
|
-
yield ((_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target));
|
|
149
|
-
}
|
|
150
|
-
}) })),
|
|
151
|
-
isDragTarget: ({ tree, item }) => {
|
|
152
|
-
const target = tree.getDragTarget();
|
|
153
|
-
return target ? target.item.getId() === item.getId() : false;
|
|
154
|
-
},
|
|
155
|
-
isDragTargetAbove: ({ tree, item }) => {
|
|
156
|
-
const target = tree.getDragTarget();
|
|
157
|
-
if (!target ||
|
|
158
|
-
!isOrderedDragTarget(target) ||
|
|
159
|
-
target.item !== item.getParent())
|
|
160
|
-
return false;
|
|
161
|
-
return target.childIndex === item.getItemMeta().posInSet;
|
|
162
|
-
},
|
|
163
|
-
isDragTargetBelow: ({ tree, item }) => {
|
|
164
|
-
const target = tree.getDragTarget();
|
|
165
|
-
if (!target ||
|
|
166
|
-
!isOrderedDragTarget(target) ||
|
|
167
|
-
target.item !== item.getParent())
|
|
168
|
-
return false;
|
|
169
|
-
return target.childIndex - 1 === item.getItemMeta().posInSet;
|
|
170
|
-
},
|
|
171
|
-
isDraggingOver: ({ tree, item }) => {
|
|
172
|
-
var _a, _b;
|
|
173
|
-
return ((_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggingOverItem) === null || _b === void 0 ? void 0 : _b.getId()) === item.getId();
|
|
174
|
-
},
|
|
175
|
-
},
|
|
176
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { ItemInstance, SetStateFn } from "../../types/core";
|
|
2
|
-
export interface DndDataRef {
|
|
3
|
-
lastDragCode?: string;
|
|
4
|
-
lastAllowDrop?: boolean;
|
|
5
|
-
}
|
|
6
|
-
export interface DndState<T> {
|
|
7
|
-
draggedItems?: ItemInstance<T>[];
|
|
8
|
-
draggingOverItem?: ItemInstance<T>;
|
|
9
|
-
dragTarget?: DragTarget<T>;
|
|
10
|
-
}
|
|
11
|
-
export interface DragLineData {
|
|
12
|
-
indent: number;
|
|
13
|
-
top: number;
|
|
14
|
-
left: number;
|
|
15
|
-
width: number;
|
|
16
|
-
}
|
|
17
|
-
export type DragTarget<T> = {
|
|
18
|
-
item: ItemInstance<T>;
|
|
19
|
-
childIndex: number;
|
|
20
|
-
insertionIndex: number;
|
|
21
|
-
dragLineIndex: number;
|
|
22
|
-
dragLineLevel: number;
|
|
23
|
-
} | {
|
|
24
|
-
item: ItemInstance<T>;
|
|
25
|
-
};
|
|
26
|
-
export declare enum DragTargetPosition {
|
|
27
|
-
Top = "top",
|
|
28
|
-
Bottom = "bottom",
|
|
29
|
-
Item = "item"
|
|
30
|
-
}
|
|
31
|
-
export type DragAndDropFeatureDef<T> = {
|
|
32
|
-
state: {
|
|
33
|
-
dnd?: DndState<T> | null;
|
|
34
|
-
};
|
|
35
|
-
config: {
|
|
36
|
-
setDndState?: SetStateFn<DndState<T> | undefined | null>;
|
|
37
|
-
/** Defines the size of the area at the top and bottom of an item where, when an item is dropped, the item willö
|
|
38
|
-
* be placed above or below the item within the same parent, as opposed to being placed inside the item.
|
|
39
|
-
* If `canReorder` is `false`, this is ignored. */
|
|
40
|
-
reorderAreaPercentage?: number;
|
|
41
|
-
canReorder?: boolean;
|
|
42
|
-
canDrag?: (items: ItemInstance<T>[]) => boolean;
|
|
43
|
-
canDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => boolean;
|
|
44
|
-
indent?: number;
|
|
45
|
-
createForeignDragObject?: (items: ItemInstance<T>[]) => {
|
|
46
|
-
format: string;
|
|
47
|
-
data: any;
|
|
48
|
-
};
|
|
49
|
-
canDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => boolean;
|
|
50
|
-
onDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => void | Promise<void>;
|
|
51
|
-
onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => void | Promise<void>;
|
|
52
|
-
onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
|
|
53
|
-
};
|
|
54
|
-
treeInstance: {
|
|
55
|
-
getDragTarget: () => DragTarget<T> | null;
|
|
56
|
-
getDragLineData: () => DragLineData | null;
|
|
57
|
-
getDragLineStyle: (topOffset?: number, leftOffset?: number) => Record<string, any>;
|
|
58
|
-
};
|
|
59
|
-
itemInstance: {
|
|
60
|
-
isDragTarget: () => boolean;
|
|
61
|
-
isDragTargetAbove: () => boolean;
|
|
62
|
-
isDragTargetBelow: () => boolean;
|
|
63
|
-
isDraggingOver: () => boolean;
|
|
64
|
-
};
|
|
65
|
-
hotkeys: never;
|
|
66
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { ItemInstance, TreeInstance } from "../../types/core";
|
|
2
|
-
import { DragTarget } from "./types";
|
|
3
|
-
export declare enum ItemDropCategory {
|
|
4
|
-
Item = 0,
|
|
5
|
-
ExpandedFolder = 1,
|
|
6
|
-
LastInGroup = 2
|
|
7
|
-
}
|
|
8
|
-
export declare const isOrderedDragTarget: <T>(dragTarget: DragTarget<T>) => dragTarget is {
|
|
9
|
-
item: ItemInstance<T>;
|
|
10
|
-
childIndex: number;
|
|
11
|
-
insertionIndex: number;
|
|
12
|
-
dragLineIndex: number;
|
|
13
|
-
dragLineLevel: number;
|
|
14
|
-
};
|
|
15
|
-
export declare const canDrop: (dataTransfer: DataTransfer | null, target: DragTarget<any>, tree: TreeInstance<any>) => boolean;
|
|
16
|
-
export declare const getItemDropCategory: (item: ItemInstance<any>) => ItemDropCategory;
|
|
17
|
-
export declare const getInsertionIndex: <T>(children: ItemInstance<T>[], childIndex: number, draggedItems: ItemInstance<T>[] | undefined) => number;
|
|
18
|
-
export declare const getDragCode: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => string;
|
|
19
|
-
/** @param item refers to the bottom-most item of the container, at which bottom is being reparented on (e.g. root-1-2-6) */
|
|
20
|
-
export declare const getReparentTarget: <T>(item: ItemInstance<T>, reparentLevel: number, draggedItems: ItemInstance<T>[] | undefined) => {
|
|
21
|
-
item: ItemInstance<any>;
|
|
22
|
-
childIndex: number;
|
|
23
|
-
insertionIndex: number;
|
|
24
|
-
dragLineIndex: number;
|
|
25
|
-
dragLineLevel: number;
|
|
26
|
-
};
|
|
27
|
-
export declare const getDragTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canReorder?: boolean | undefined) => DragTarget<any>;
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
export var ItemDropCategory;
|
|
2
|
-
(function (ItemDropCategory) {
|
|
3
|
-
ItemDropCategory[ItemDropCategory["Item"] = 0] = "Item";
|
|
4
|
-
ItemDropCategory[ItemDropCategory["ExpandedFolder"] = 1] = "ExpandedFolder";
|
|
5
|
-
ItemDropCategory[ItemDropCategory["LastInGroup"] = 2] = "LastInGroup";
|
|
6
|
-
})(ItemDropCategory || (ItemDropCategory = {}));
|
|
7
|
-
var PlacementType;
|
|
8
|
-
(function (PlacementType) {
|
|
9
|
-
PlacementType[PlacementType["ReorderAbove"] = 0] = "ReorderAbove";
|
|
10
|
-
PlacementType[PlacementType["ReorderBelow"] = 1] = "ReorderBelow";
|
|
11
|
-
PlacementType[PlacementType["MakeChild"] = 2] = "MakeChild";
|
|
12
|
-
PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
|
|
13
|
-
})(PlacementType || (PlacementType = {}));
|
|
14
|
-
export const isOrderedDragTarget = (dragTarget) => "childIndex" in dragTarget;
|
|
15
|
-
export const canDrop = (dataTransfer, target, tree) => {
|
|
16
|
-
var _a, _b, _c;
|
|
17
|
-
const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
|
|
18
|
-
const config = tree.getConfig();
|
|
19
|
-
if (draggedItems && !((_c = (_b = config.canDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target)) !== null && _c !== void 0 ? _c : true)) {
|
|
20
|
-
return false;
|
|
21
|
-
}
|
|
22
|
-
if (draggedItems &&
|
|
23
|
-
draggedItems.some((draggedItem) => target.item.getId() === draggedItem.getId() ||
|
|
24
|
-
target.item.isDescendentOf(draggedItem.getId()))) {
|
|
25
|
-
return false;
|
|
26
|
-
}
|
|
27
|
-
if (!draggedItems &&
|
|
28
|
-
dataTransfer &&
|
|
29
|
-
config.canDropForeignDragObject &&
|
|
30
|
-
!config.canDropForeignDragObject(dataTransfer, target)) {
|
|
31
|
-
return false;
|
|
32
|
-
}
|
|
33
|
-
return true;
|
|
34
|
-
};
|
|
35
|
-
export const getItemDropCategory = (item) => {
|
|
36
|
-
if (item.isExpanded()) {
|
|
37
|
-
return ItemDropCategory.ExpandedFolder;
|
|
38
|
-
}
|
|
39
|
-
const parent = item.getParent();
|
|
40
|
-
if (parent && item.getIndexInParent() === item.getItemMeta().setSize - 1) {
|
|
41
|
-
return ItemDropCategory.LastInGroup;
|
|
42
|
-
}
|
|
43
|
-
return ItemDropCategory.Item;
|
|
44
|
-
};
|
|
45
|
-
export const getInsertionIndex = (children, childIndex, draggedItems) => {
|
|
46
|
-
var _a;
|
|
47
|
-
const numberOfDragItemsBeforeTarget = (_a = children
|
|
48
|
-
.slice(0, childIndex)
|
|
49
|
-
.reduce((counter, child) => child && (draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some((i) => i.getId() === child.getId()))
|
|
50
|
-
? ++counter
|
|
51
|
-
: counter, 0)) !== null && _a !== void 0 ? _a : 0;
|
|
52
|
-
return childIndex - numberOfDragItemsBeforeTarget;
|
|
53
|
-
};
|
|
54
|
-
const getTargetPlacement = (e, item, tree, canMakeChild) => {
|
|
55
|
-
var _a, _b, _c, _d, _e;
|
|
56
|
-
const config = tree.getConfig();
|
|
57
|
-
if (!config.canReorder) {
|
|
58
|
-
return canMakeChild
|
|
59
|
-
? { type: PlacementType.MakeChild }
|
|
60
|
-
: { type: PlacementType.ReorderBelow };
|
|
61
|
-
}
|
|
62
|
-
const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
63
|
-
const topPercent = bb ? (e.clientY - bb.top) / bb.height : 0.5;
|
|
64
|
-
const leftPixels = bb ? e.clientX - bb.left : 0;
|
|
65
|
-
const targetDropCategory = getItemDropCategory(item);
|
|
66
|
-
const reorderAreaPercentage = !canMakeChild
|
|
67
|
-
? 0.5
|
|
68
|
-
: (_b = config.reorderAreaPercentage) !== null && _b !== void 0 ? _b : 0.3;
|
|
69
|
-
const indent = (_c = config.indent) !== null && _c !== void 0 ? _c : 20;
|
|
70
|
-
const makeChildType = canMakeChild
|
|
71
|
-
? PlacementType.MakeChild
|
|
72
|
-
: PlacementType.ReorderBelow;
|
|
73
|
-
if (targetDropCategory === ItemDropCategory.ExpandedFolder) {
|
|
74
|
-
if (topPercent < reorderAreaPercentage) {
|
|
75
|
-
return { type: PlacementType.ReorderAbove };
|
|
76
|
-
}
|
|
77
|
-
return { type: makeChildType };
|
|
78
|
-
}
|
|
79
|
-
if (targetDropCategory === ItemDropCategory.LastInGroup) {
|
|
80
|
-
if (leftPixels < item.getItemMeta().level * indent) {
|
|
81
|
-
if (topPercent < 0.5) {
|
|
82
|
-
return { type: PlacementType.ReorderAbove };
|
|
83
|
-
}
|
|
84
|
-
const minLevel = (_e = (_d = item.getItemBelow()) === null || _d === void 0 ? void 0 : _d.getItemMeta().level) !== null && _e !== void 0 ? _e : 0;
|
|
85
|
-
return {
|
|
86
|
-
type: PlacementType.Reparent,
|
|
87
|
-
reparentLevel: Math.max(minLevel, Math.floor(leftPixels / indent)),
|
|
88
|
-
};
|
|
89
|
-
}
|
|
90
|
-
// if not at left of item area, treat as if it was a normal item
|
|
91
|
-
}
|
|
92
|
-
// targetDropCategory === ItemDropCategory.Item
|
|
93
|
-
if (topPercent < reorderAreaPercentage) {
|
|
94
|
-
return { type: PlacementType.ReorderAbove };
|
|
95
|
-
}
|
|
96
|
-
if (topPercent > 1 - reorderAreaPercentage) {
|
|
97
|
-
return { type: PlacementType.ReorderBelow };
|
|
98
|
-
}
|
|
99
|
-
return { type: makeChildType };
|
|
100
|
-
};
|
|
101
|
-
export const getDragCode = (e, item, tree) => {
|
|
102
|
-
const placement = getTargetPlacement(e, item, tree, true);
|
|
103
|
-
return [
|
|
104
|
-
item.getId(),
|
|
105
|
-
placement.type,
|
|
106
|
-
placement.type === PlacementType.Reparent ? placement.reparentLevel : 0,
|
|
107
|
-
].join("__");
|
|
108
|
-
};
|
|
109
|
-
const getNthParent = (item, n) => {
|
|
110
|
-
if (n === item.getItemMeta().level) {
|
|
111
|
-
return item;
|
|
112
|
-
}
|
|
113
|
-
return getNthParent(item.getParent(), n);
|
|
114
|
-
};
|
|
115
|
-
/** @param item refers to the bottom-most item of the container, at which bottom is being reparented on (e.g. root-1-2-6) */
|
|
116
|
-
export const getReparentTarget = (item, reparentLevel, draggedItems) => {
|
|
117
|
-
const itemMeta = item.getItemMeta();
|
|
118
|
-
const reparentedTarget = getNthParent(item, reparentLevel - 1);
|
|
119
|
-
const targetItemAbove = getNthParent(item, reparentLevel); // .getItemBelow()!;
|
|
120
|
-
const targetIndex = targetItemAbove.getIndexInParent() + 1;
|
|
121
|
-
return {
|
|
122
|
-
item: reparentedTarget,
|
|
123
|
-
childIndex: targetIndex,
|
|
124
|
-
insertionIndex: getInsertionIndex(reparentedTarget.getChildren(), targetIndex, draggedItems),
|
|
125
|
-
dragLineIndex: itemMeta.index + 1,
|
|
126
|
-
dragLineLevel: reparentLevel,
|
|
127
|
-
};
|
|
128
|
-
};
|
|
129
|
-
export const getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) => {
|
|
130
|
-
var _a;
|
|
131
|
-
const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
|
|
132
|
-
const itemMeta = item.getItemMeta();
|
|
133
|
-
const parent = item.getParent();
|
|
134
|
-
const itemTarget = { item };
|
|
135
|
-
const parentTarget = parent ? { item: parent } : null;
|
|
136
|
-
const canBecomeSibling = parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
|
|
137
|
-
const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
|
|
138
|
-
const placement = getTargetPlacement(e, item, tree, canMakeChild);
|
|
139
|
-
if (!canReorder &&
|
|
140
|
-
parent &&
|
|
141
|
-
canBecomeSibling &&
|
|
142
|
-
placement.type !== PlacementType.MakeChild) {
|
|
143
|
-
return parentTarget;
|
|
144
|
-
}
|
|
145
|
-
if (!canReorder && parent && !canBecomeSibling) {
|
|
146
|
-
// TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DragTargetStrategy[] ?
|
|
147
|
-
return getDragTarget(e, parent, tree, false);
|
|
148
|
-
}
|
|
149
|
-
if (!parent) {
|
|
150
|
-
// Shouldn't happen, but if dropped "next" to root item, just drop it inside
|
|
151
|
-
return itemTarget;
|
|
152
|
-
}
|
|
153
|
-
if (placement.type === PlacementType.MakeChild) {
|
|
154
|
-
return itemTarget;
|
|
155
|
-
}
|
|
156
|
-
if (!canBecomeSibling) {
|
|
157
|
-
return getDragTarget(e, parent, tree, false);
|
|
158
|
-
}
|
|
159
|
-
if (placement.type === PlacementType.Reparent) {
|
|
160
|
-
return getReparentTarget(item, placement.reparentLevel, draggedItems);
|
|
161
|
-
}
|
|
162
|
-
const maybeAddOneForBelow = placement.type === PlacementType.ReorderAbove ? 0 : 1;
|
|
163
|
-
const childIndex = item.getIndexInParent() + maybeAddOneForBelow;
|
|
164
|
-
return {
|
|
165
|
-
item: parent,
|
|
166
|
-
dragLineIndex: itemMeta.index + maybeAddOneForBelow,
|
|
167
|
-
dragLineLevel: itemMeta.level,
|
|
168
|
-
childIndex,
|
|
169
|
-
// TODO performance could be improved by computing this only when dragcode changed
|
|
170
|
-
insertionIndex: getInsertionIndex(parent.getChildren(), childIndex, draggedItems),
|
|
171
|
-
};
|
|
172
|
-
};
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
export const expandAllFeature = {
|
|
11
|
-
key: "expand-all",
|
|
12
|
-
treeInstance: {
|
|
13
|
-
expandAll: (_a, cancelToken_1) => __awaiter(void 0, [_a, cancelToken_1], void 0, function* ({ tree }, cancelToken) {
|
|
14
|
-
yield Promise.all(tree.getItems().map((item) => item.expandAll(cancelToken)));
|
|
15
|
-
}),
|
|
16
|
-
collapseAll: ({ tree }) => {
|
|
17
|
-
tree.applySubStateUpdate("expandedItems", []);
|
|
18
|
-
tree.rebuildTree();
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
itemInstance: {
|
|
22
|
-
expandAll: (_a, cancelToken_1) => __awaiter(void 0, [_a, cancelToken_1], void 0, function* ({ tree, item }, cancelToken) {
|
|
23
|
-
if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.current) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
if (!item.isFolder()) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
item.expand();
|
|
30
|
-
yield tree.waitForItemChildrenLoaded(item.getId());
|
|
31
|
-
yield Promise.all(item.getChildren().map((child) => __awaiter(void 0, void 0, void 0, function* () {
|
|
32
|
-
yield tree.waitForItemChildrenLoaded(item.getId());
|
|
33
|
-
yield (child === null || child === void 0 ? void 0 : child.expandAll(cancelToken));
|
|
34
|
-
})));
|
|
35
|
-
}),
|
|
36
|
-
collapseAll: ({ item }) => {
|
|
37
|
-
if (!item.isExpanded())
|
|
38
|
-
return;
|
|
39
|
-
for (const child of item.getChildren()) {
|
|
40
|
-
child === null || child === void 0 ? void 0 : child.collapseAll();
|
|
41
|
-
}
|
|
42
|
-
item.collapse();
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
hotkeys: {
|
|
46
|
-
expandSelected: {
|
|
47
|
-
hotkey: "Control+Shift+Plus",
|
|
48
|
-
handler: (_, tree) => __awaiter(void 0, void 0, void 0, function* () {
|
|
49
|
-
const cancelToken = { current: false };
|
|
50
|
-
const cancelHandler = (e) => {
|
|
51
|
-
if (e.code === "Escape") {
|
|
52
|
-
cancelToken.current = true;
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
document.addEventListener("keydown", cancelHandler);
|
|
56
|
-
yield Promise.all(tree.getSelectedItems().map((item) => item.expandAll(cancelToken)));
|
|
57
|
-
document.removeEventListener("keydown", cancelHandler);
|
|
58
|
-
}),
|
|
59
|
-
},
|
|
60
|
-
collapseSelected: {
|
|
61
|
-
hotkey: "Control+Shift+Minus",
|
|
62
|
-
handler: (_, tree) => {
|
|
63
|
-
tree.getSelectedItems().forEach((item) => item.collapseAll());
|
|
64
|
-
},
|
|
65
|
-
},
|
|
66
|
-
},
|
|
67
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export interface ExpandAllDataRef {
|
|
2
|
-
}
|
|
3
|
-
export type ExpandAllFeatureDef = {
|
|
4
|
-
state: {};
|
|
5
|
-
config: {};
|
|
6
|
-
treeInstance: {
|
|
7
|
-
expandAll: (cancelToken?: {
|
|
8
|
-
current: boolean;
|
|
9
|
-
}) => Promise<void>;
|
|
10
|
-
collapseAll: () => void;
|
|
11
|
-
};
|
|
12
|
-
itemInstance: {
|
|
13
|
-
expandAll: (cancelToken?: {
|
|
14
|
-
current: boolean;
|
|
15
|
-
}) => Promise<void>;
|
|
16
|
-
collapseAll: () => void;
|
|
17
|
-
};
|
|
18
|
-
hotkeys: "expandSelected" | "collapseSelected";
|
|
19
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
const specialKeys = {
|
|
2
|
-
// TODO:breaking deprecate auto-lowercase
|
|
3
|
-
letter: /^Key[A-Z]$/,
|
|
4
|
-
letterornumber: /^(Key[A-Z]|Digit[0-9])$/,
|
|
5
|
-
plus: /^(NumpadAdd|Plus)$/,
|
|
6
|
-
minus: /^(NumpadSubtract|Minus)$/,
|
|
7
|
-
control: /^(ControlLeft|ControlRight)$/,
|
|
8
|
-
shift: /^(ShiftLeft|ShiftRight)$/,
|
|
9
|
-
};
|
|
10
|
-
const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
|
|
11
|
-
const supposedKeys = hotkey.hotkey.toLowerCase().split("+"); // TODO:breaking deprecate auto-lowercase
|
|
12
|
-
const doKeysMatch = supposedKeys.every((key) => {
|
|
13
|
-
if (key in specialKeys) {
|
|
14
|
-
return [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey));
|
|
15
|
-
}
|
|
16
|
-
const pressedKeysLowerCase = [...pressedKeys] // TODO:breaking deprecate auto-lowercase
|
|
17
|
-
.map((k) => k.toLowerCase());
|
|
18
|
-
if (pressedKeysLowerCase.includes(key.toLowerCase())) {
|
|
19
|
-
return true;
|
|
20
|
-
}
|
|
21
|
-
if (pressedKeysLowerCase.includes(`key${key.toLowerCase()}`)) {
|
|
22
|
-
// TODO:breaking deprecate e.key character matching
|
|
23
|
-
return true;
|
|
24
|
-
}
|
|
25
|
-
return false;
|
|
26
|
-
});
|
|
27
|
-
const isEnabled = !hotkey.isEnabled || hotkey.isEnabled(tree);
|
|
28
|
-
const equalCounts = pressedKeys.size === supposedKeys.length;
|
|
29
|
-
return doKeysMatch && isEnabled && equalCounts;
|
|
30
|
-
};
|
|
31
|
-
const findHotkeyMatch = (pressedKeys, tree, config1, config2) => {
|
|
32
|
-
var _a;
|
|
33
|
-
return (_a = Object.entries(Object.assign(Object.assign({}, config1), config2)).find(([, hotkey]) => testHotkeyMatch(pressedKeys, tree, hotkey))) === null || _a === void 0 ? void 0 : _a[0];
|
|
34
|
-
};
|
|
35
|
-
export const hotkeysCoreFeature = {
|
|
36
|
-
key: "hotkeys-core",
|
|
37
|
-
onTreeMount: (tree, element) => {
|
|
38
|
-
const data = tree.getDataRef();
|
|
39
|
-
const keydown = (e) => {
|
|
40
|
-
var _a;
|
|
41
|
-
var _b;
|
|
42
|
-
const { ignoreHotkeysOnInputs, onTreeHotkey, hotkeys } = tree.getConfig();
|
|
43
|
-
if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
(_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
|
|
47
|
-
const newMatch = !data.current.pressedKeys.has(e.code);
|
|
48
|
-
data.current.pressedKeys.add(e.code);
|
|
49
|
-
const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), hotkeys);
|
|
50
|
-
if (e.target instanceof HTMLInputElement) {
|
|
51
|
-
// JS respects composite keydowns while input elements are focused, and
|
|
52
|
-
// doesnt send the associated keyup events with the same key name
|
|
53
|
-
data.current.pressedKeys.delete(e.code);
|
|
54
|
-
}
|
|
55
|
-
if (!hotkeyName)
|
|
56
|
-
return;
|
|
57
|
-
const hotkeyConfig = Object.assign(Object.assign({}, tree.getHotkeyPresets()[hotkeyName]), hotkeys === null || hotkeys === void 0 ? void 0 : hotkeys[hotkeyName]);
|
|
58
|
-
if (!hotkeyConfig)
|
|
59
|
-
return;
|
|
60
|
-
if (!hotkeyConfig.allowWhenInputFocused &&
|
|
61
|
-
e.target instanceof HTMLInputElement)
|
|
62
|
-
return;
|
|
63
|
-
if (!hotkeyConfig.canRepeat && !newMatch)
|
|
64
|
-
return;
|
|
65
|
-
if (hotkeyConfig.preventDefault)
|
|
66
|
-
e.preventDefault();
|
|
67
|
-
hotkeyConfig.handler(e, tree);
|
|
68
|
-
onTreeHotkey === null || onTreeHotkey === void 0 ? void 0 : onTreeHotkey(hotkeyName, e);
|
|
69
|
-
};
|
|
70
|
-
const keyup = (e) => {
|
|
71
|
-
var _a;
|
|
72
|
-
var _b;
|
|
73
|
-
(_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
|
|
74
|
-
data.current.pressedKeys.delete(e.code);
|
|
75
|
-
};
|
|
76
|
-
const reset = () => {
|
|
77
|
-
data.current.pressedKeys = new Set();
|
|
78
|
-
};
|
|
79
|
-
// keyup is registered on document, because some hotkeys shift
|
|
80
|
-
// the focus away from the tree (i.e. search)
|
|
81
|
-
// and then we wouldn't get the keyup event anymore
|
|
82
|
-
element.addEventListener("keydown", keydown);
|
|
83
|
-
document.addEventListener("keyup", keyup);
|
|
84
|
-
window.addEventListener("focus", reset);
|
|
85
|
-
data.current.keydownHandler = keydown;
|
|
86
|
-
data.current.keyupHandler = keyup;
|
|
87
|
-
data.current.resetHandler = reset;
|
|
88
|
-
},
|
|
89
|
-
onTreeUnmount: (tree, element) => {
|
|
90
|
-
const data = tree.getDataRef();
|
|
91
|
-
if (data.current.keyupHandler) {
|
|
92
|
-
document.removeEventListener("keyup", data.current.keyupHandler);
|
|
93
|
-
delete data.current.keyupHandler;
|
|
94
|
-
}
|
|
95
|
-
if (data.current.keydownHandler) {
|
|
96
|
-
element.removeEventListener("keydown", data.current.keydownHandler);
|
|
97
|
-
delete data.current.keydownHandler;
|
|
98
|
-
}
|
|
99
|
-
if (data.current.resetHandler) {
|
|
100
|
-
window.removeEventListener("focus", data.current.resetHandler);
|
|
101
|
-
delete data.current.resetHandler;
|
|
102
|
-
}
|
|
103
|
-
},
|
|
104
|
-
};
|