jqtree 1.8.11 → 1.9.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/bower.json +1 -1
- package/eslint.config.mjs +21 -7
- package/package.json +40 -46
- package/pnpm-workspace.yaml +4 -0
- package/src/animation.ts +48 -0
- package/src/dataLoader.ts +38 -48
- package/src/dragAndDropHandler/dragElement.ts +11 -11
- package/src/dragAndDropHandler/generateHitAreas.ts +4 -3
- package/src/dragAndDropHandler/index.ts +119 -120
- package/src/dragAndDropHandler/iterateVisibleNodes.ts +1 -1
- package/src/dragAndDropHandler/types.ts +1 -1
- package/src/elementsRenderer.ts +71 -78
- package/src/jqtreeMethodTypes.ts +2 -2
- package/src/jqtreeOptions.ts +3 -2
- package/src/keyHandler.ts +34 -34
- package/src/mouseHandler.ts +118 -119
- package/src/node.ts +22 -22
- package/src/nodeElement/borderDropHint.ts +6 -6
- package/src/nodeElement/folderElement.ts +30 -22
- package/src/nodeElement/ghostDropHint.ts +24 -24
- package/src/nodeElement/index.ts +13 -12
- package/src/positionUtils.ts +18 -0
- package/src/saveStateHandler.ts +56 -55
- package/src/scrollHandler/containerScrollParent.ts +17 -15
- package/src/scrollHandler/documentScrollParent.ts +23 -22
- package/src/scrollHandler.ts +23 -22
- package/src/selectNodeHandler.ts +28 -28
- package/src/tree.jquery.ts +251 -269
- package/src/util.ts +0 -14
- package/src/version.ts +1 -1
- package/tree.jquery.debug.js +873 -734
- package/tree.jquery.debug.js.map +1 -1
- package/tree.jquery.js +2 -2
- package/tree.jquery.js.map +1 -1
package/src/mouseHandler.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { TriggerEvent } from "./jqtreeMethodTypes";
|
|
1
|
+
import type { TriggerEvent } from "./jqtreeMethodTypes";
|
|
2
|
+
import type { PositionInfo } from "./mouseUtils";
|
|
3
|
+
import type { Node } from "./node";
|
|
4
|
+
|
|
2
5
|
import {
|
|
3
6
|
getPositionInfoFromMouseEvent,
|
|
4
7
|
getPositionInfoFromTouch,
|
|
5
|
-
PositionInfo,
|
|
6
8
|
} from "./mouseUtils";
|
|
7
|
-
import { Node } from "./node";
|
|
8
9
|
|
|
9
10
|
export type GetMouseDelay = () => number;
|
|
10
11
|
export type GetNode = (element: HTMLElement) => Node | null;
|
|
@@ -31,30 +32,30 @@ interface MouseHandlerParams {
|
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
class MouseHandler {
|
|
34
|
-
private
|
|
35
|
-
private
|
|
36
|
-
private
|
|
35
|
+
private _element: HTMLElement;
|
|
36
|
+
private _getMouseDelay: GetMouseDelay;
|
|
37
|
+
private _getNode: GetNode;
|
|
37
38
|
|
|
38
|
-
private
|
|
39
|
+
private _isMouseDelayMet: boolean;
|
|
39
40
|
|
|
40
|
-
private
|
|
41
|
+
private _isMouseStarted: boolean;
|
|
41
42
|
|
|
42
|
-
private
|
|
43
|
+
private _mouseDelayTimer: null | number;
|
|
43
44
|
|
|
44
|
-
private
|
|
45
|
-
private
|
|
46
|
-
private
|
|
45
|
+
private _mouseDownInfo: null | PositionInfo;
|
|
46
|
+
private _onClickButton: (node: Node) => void;
|
|
47
|
+
private _onClickTitle: (node: Node) => void;
|
|
47
48
|
|
|
48
|
-
private
|
|
49
|
+
private _onMouseCapture: MouseCapture;
|
|
49
50
|
|
|
50
|
-
private
|
|
51
|
+
private _onMouseDrag: (positionInfo: PositionInfo) => void;
|
|
51
52
|
|
|
52
|
-
private
|
|
53
|
+
private _onMouseStart: MouseStart;
|
|
53
54
|
|
|
54
|
-
private
|
|
55
|
+
private _onMouseStop: (positionInfo: PositionInfo) => void;
|
|
55
56
|
|
|
56
|
-
private
|
|
57
|
-
private
|
|
57
|
+
private _triggerEvent: TriggerEvent;
|
|
58
|
+
private _useContextMenu: boolean;
|
|
58
59
|
constructor({
|
|
59
60
|
element,
|
|
60
61
|
getMouseDelay,
|
|
@@ -68,56 +69,56 @@ class MouseHandler {
|
|
|
68
69
|
triggerEvent,
|
|
69
70
|
useContextMenu,
|
|
70
71
|
}: MouseHandlerParams) {
|
|
71
|
-
this.
|
|
72
|
-
this.
|
|
73
|
-
this.
|
|
74
|
-
this.
|
|
75
|
-
this.
|
|
76
|
-
this.
|
|
77
|
-
this.
|
|
78
|
-
this.
|
|
79
|
-
this.
|
|
80
|
-
this.
|
|
81
|
-
this.
|
|
82
|
-
|
|
83
|
-
element.addEventListener("click", this.
|
|
84
|
-
element.addEventListener("dblclick", this.
|
|
85
|
-
element.addEventListener("mousedown", this.
|
|
72
|
+
this._element = element;
|
|
73
|
+
this._getMouseDelay = getMouseDelay;
|
|
74
|
+
this._getNode = getNode;
|
|
75
|
+
this._onClickButton = onClickButton;
|
|
76
|
+
this._onClickTitle = onClickTitle;
|
|
77
|
+
this._onMouseCapture = onMouseCapture;
|
|
78
|
+
this._onMouseDrag = onMouseDrag;
|
|
79
|
+
this._onMouseStart = onMouseStart;
|
|
80
|
+
this._onMouseStop = onMouseStop;
|
|
81
|
+
this._triggerEvent = triggerEvent;
|
|
82
|
+
this._useContextMenu = useContextMenu;
|
|
83
|
+
|
|
84
|
+
element.addEventListener("click", this._handleClick);
|
|
85
|
+
element.addEventListener("dblclick", this._handleDblclick);
|
|
86
|
+
element.addEventListener("mousedown", this._mouseDown, {
|
|
86
87
|
passive: false,
|
|
87
88
|
});
|
|
88
|
-
element.addEventListener("touchstart", this.
|
|
89
|
+
element.addEventListener("touchstart", this._touchStart, {
|
|
89
90
|
passive: false,
|
|
90
91
|
});
|
|
91
92
|
|
|
92
93
|
if (useContextMenu) {
|
|
93
|
-
element.addEventListener("contextmenu", this.
|
|
94
|
+
element.addEventListener("contextmenu", this._handleContextmenu);
|
|
94
95
|
}
|
|
95
96
|
|
|
96
|
-
this.
|
|
97
|
-
this.
|
|
98
|
-
this.
|
|
99
|
-
this.
|
|
97
|
+
this._isMouseStarted = false;
|
|
98
|
+
this._mouseDelayTimer = null;
|
|
99
|
+
this._isMouseDelayMet = false;
|
|
100
|
+
this._mouseDownInfo = null;
|
|
100
101
|
}
|
|
101
102
|
public deinit(): void {
|
|
102
|
-
this.
|
|
103
|
-
this.
|
|
103
|
+
this._element.removeEventListener("click", this._handleClick);
|
|
104
|
+
this._element.removeEventListener("dblclick", this._handleDblclick);
|
|
104
105
|
|
|
105
|
-
if (this.
|
|
106
|
-
this.
|
|
106
|
+
if (this._useContextMenu) {
|
|
107
|
+
this._element.removeEventListener(
|
|
107
108
|
"contextmenu",
|
|
108
|
-
this.
|
|
109
|
+
this._handleContextmenu,
|
|
109
110
|
);
|
|
110
111
|
}
|
|
111
112
|
|
|
112
|
-
this.
|
|
113
|
-
this.
|
|
114
|
-
this.
|
|
113
|
+
this._element.removeEventListener("mousedown", this._mouseDown);
|
|
114
|
+
this._element.removeEventListener("touchstart", this._touchStart);
|
|
115
|
+
this._removeMouseMoveEventListeners();
|
|
115
116
|
}
|
|
116
|
-
private
|
|
117
|
+
private _getClickTarget(element: HTMLElement): ClickTarget | null {
|
|
117
118
|
const button = element.closest<HTMLElement>(".jqtree-toggler");
|
|
118
119
|
|
|
119
120
|
if (button) {
|
|
120
|
-
const node = this.
|
|
121
|
+
const node = this._getNode(button);
|
|
121
122
|
|
|
122
123
|
if (node) {
|
|
123
124
|
return {
|
|
@@ -130,7 +131,7 @@ class MouseHandler {
|
|
|
130
131
|
element.closest<HTMLElement>(".jqtree-element");
|
|
131
132
|
|
|
132
133
|
if (jqTreeElement) {
|
|
133
|
-
const node = this.
|
|
134
|
+
const node = this._getNode(jqTreeElement);
|
|
134
135
|
if (node) {
|
|
135
136
|
return {
|
|
136
137
|
node,
|
|
@@ -142,12 +143,12 @@ class MouseHandler {
|
|
|
142
143
|
|
|
143
144
|
return null;
|
|
144
145
|
}
|
|
145
|
-
private
|
|
146
|
+
private _handleClick = (e: MouseEvent): void => {
|
|
146
147
|
if (!e.target) {
|
|
147
148
|
return;
|
|
148
149
|
}
|
|
149
150
|
|
|
150
|
-
const clickTarget = this.
|
|
151
|
+
const clickTarget = this._getClickTarget(e.target as HTMLElement);
|
|
151
152
|
|
|
152
153
|
if (!clickTarget) {
|
|
153
154
|
return;
|
|
@@ -155,27 +156,25 @@ class MouseHandler {
|
|
|
155
156
|
|
|
156
157
|
switch (clickTarget.type) {
|
|
157
158
|
case "button":
|
|
158
|
-
this.
|
|
159
|
+
this._onClickButton(clickTarget.node);
|
|
159
160
|
|
|
160
161
|
e.preventDefault();
|
|
161
162
|
e.stopPropagation();
|
|
162
163
|
break;
|
|
163
164
|
|
|
164
165
|
case "label": {
|
|
165
|
-
|
|
166
|
+
if (this._triggerEvent("tree.click", {
|
|
166
167
|
click_event: e,
|
|
167
168
|
node: clickTarget.node,
|
|
168
|
-
})
|
|
169
|
-
|
|
170
|
-
if (!event.isDefaultPrevented()) {
|
|
171
|
-
this.onClickTitle(clickTarget.node);
|
|
169
|
+
})) {
|
|
170
|
+
this._onClickTitle(clickTarget.node);
|
|
172
171
|
}
|
|
173
172
|
break;
|
|
174
173
|
}
|
|
175
174
|
}
|
|
176
175
|
};
|
|
177
176
|
|
|
178
|
-
private
|
|
177
|
+
private _handleContextmenu = (e: MouseEvent) => {
|
|
179
178
|
if (!e.target) {
|
|
180
179
|
return;
|
|
181
180
|
}
|
|
@@ -185,12 +184,12 @@ class MouseHandler {
|
|
|
185
184
|
);
|
|
186
185
|
|
|
187
186
|
if (div) {
|
|
188
|
-
const node = this.
|
|
187
|
+
const node = this._getNode(div);
|
|
189
188
|
if (node) {
|
|
190
189
|
e.preventDefault();
|
|
191
190
|
e.stopPropagation();
|
|
192
191
|
|
|
193
|
-
this.
|
|
192
|
+
this._triggerEvent("tree.contextmenu", {
|
|
194
193
|
click_event: e,
|
|
195
194
|
node,
|
|
196
195
|
});
|
|
@@ -201,44 +200,44 @@ class MouseHandler {
|
|
|
201
200
|
return null;
|
|
202
201
|
};
|
|
203
202
|
|
|
204
|
-
private
|
|
203
|
+
private _handleDblclick = (e: MouseEvent): void => {
|
|
205
204
|
if (!e.target) {
|
|
206
205
|
return;
|
|
207
206
|
}
|
|
208
207
|
|
|
209
|
-
const clickTarget = this.
|
|
208
|
+
const clickTarget = this._getClickTarget(e.target as HTMLElement);
|
|
210
209
|
|
|
211
210
|
if (clickTarget?.type === "label") {
|
|
212
|
-
this.
|
|
211
|
+
this._triggerEvent("tree.dblclick", {
|
|
213
212
|
click_event: e,
|
|
214
213
|
node: clickTarget.node,
|
|
215
214
|
});
|
|
216
215
|
}
|
|
217
216
|
};
|
|
218
217
|
|
|
219
|
-
private
|
|
218
|
+
private _handleMouseDown(positionInfo: PositionInfo): boolean {
|
|
220
219
|
// We may have missed mouseup (out of window)
|
|
221
|
-
if (this.
|
|
222
|
-
this.
|
|
220
|
+
if (this._isMouseStarted) {
|
|
221
|
+
this._handleMouseUp(positionInfo);
|
|
223
222
|
}
|
|
224
223
|
|
|
225
|
-
this.
|
|
224
|
+
this._mouseDownInfo = positionInfo;
|
|
226
225
|
|
|
227
|
-
if (!this.
|
|
226
|
+
if (!this._onMouseCapture(positionInfo)) {
|
|
228
227
|
return false;
|
|
229
228
|
}
|
|
230
229
|
|
|
231
|
-
this.
|
|
230
|
+
this._handleStartMouse();
|
|
232
231
|
|
|
233
232
|
return true;
|
|
234
233
|
}
|
|
235
234
|
|
|
236
|
-
private
|
|
235
|
+
private _handleMouseMove(
|
|
237
236
|
e: MouseEvent | TouchEvent,
|
|
238
237
|
positionInfo: PositionInfo,
|
|
239
238
|
): void {
|
|
240
|
-
if (this.
|
|
241
|
-
this.
|
|
239
|
+
if (this._isMouseStarted) {
|
|
240
|
+
this._onMouseDrag(positionInfo);
|
|
242
241
|
|
|
243
242
|
if (e.cancelable) {
|
|
244
243
|
e.preventDefault();
|
|
@@ -246,99 +245,99 @@ class MouseHandler {
|
|
|
246
245
|
return;
|
|
247
246
|
}
|
|
248
247
|
|
|
249
|
-
if (!this.
|
|
248
|
+
if (!this._isMouseDelayMet) {
|
|
250
249
|
return;
|
|
251
250
|
}
|
|
252
251
|
|
|
253
|
-
if (this.
|
|
254
|
-
this.
|
|
252
|
+
if (this._mouseDownInfo) {
|
|
253
|
+
this._isMouseStarted = this._onMouseStart(this._mouseDownInfo);
|
|
255
254
|
}
|
|
256
255
|
|
|
257
|
-
if (this.
|
|
258
|
-
this.
|
|
256
|
+
if (this._isMouseStarted) {
|
|
257
|
+
this._onMouseDrag(positionInfo);
|
|
259
258
|
|
|
260
259
|
if (e.cancelable) {
|
|
261
260
|
e.preventDefault();
|
|
262
261
|
}
|
|
263
262
|
} else {
|
|
264
|
-
this.
|
|
263
|
+
this._handleMouseUp(positionInfo);
|
|
265
264
|
}
|
|
266
265
|
}
|
|
267
|
-
private
|
|
268
|
-
this.
|
|
269
|
-
this.
|
|
270
|
-
this.
|
|
271
|
-
|
|
272
|
-
if (this.
|
|
273
|
-
this.
|
|
274
|
-
this.
|
|
266
|
+
private _handleMouseUp(positionInfo: PositionInfo): void {
|
|
267
|
+
this._removeMouseMoveEventListeners();
|
|
268
|
+
this._isMouseDelayMet = false;
|
|
269
|
+
this._mouseDownInfo = null;
|
|
270
|
+
|
|
271
|
+
if (this._isMouseStarted) {
|
|
272
|
+
this._isMouseStarted = false;
|
|
273
|
+
this._onMouseStop(positionInfo);
|
|
275
274
|
}
|
|
276
275
|
}
|
|
277
276
|
|
|
278
|
-
private
|
|
279
|
-
document.addEventListener("mousemove", this.
|
|
277
|
+
private _handleStartMouse(): void {
|
|
278
|
+
document.addEventListener("mousemove", this._mouseMove, {
|
|
280
279
|
passive: false,
|
|
281
280
|
});
|
|
282
|
-
document.addEventListener("touchmove", this.
|
|
281
|
+
document.addEventListener("touchmove", this._touchMove, {
|
|
283
282
|
passive: false,
|
|
284
283
|
});
|
|
285
|
-
document.addEventListener("mouseup", this.
|
|
286
|
-
document.addEventListener("touchend", this.
|
|
284
|
+
document.addEventListener("mouseup", this._mouseUp, { passive: false });
|
|
285
|
+
document.addEventListener("touchend", this._touchEnd, {
|
|
287
286
|
passive: false,
|
|
288
287
|
});
|
|
289
288
|
|
|
290
|
-
const mouseDelay = this.
|
|
289
|
+
const mouseDelay = this._getMouseDelay();
|
|
291
290
|
|
|
292
291
|
if (mouseDelay) {
|
|
293
|
-
this.
|
|
292
|
+
this._startMouseDelayTimer(mouseDelay);
|
|
294
293
|
} else {
|
|
295
|
-
this.
|
|
294
|
+
this._isMouseDelayMet = true;
|
|
296
295
|
}
|
|
297
296
|
}
|
|
298
297
|
|
|
299
|
-
private
|
|
298
|
+
private _mouseDown = (e: MouseEvent): void => {
|
|
300
299
|
// Left mouse button?
|
|
301
300
|
if (e.button !== 0) {
|
|
302
301
|
return;
|
|
303
302
|
}
|
|
304
303
|
|
|
305
|
-
const result = this.
|
|
304
|
+
const result = this._handleMouseDown(getPositionInfoFromMouseEvent(e));
|
|
306
305
|
|
|
307
306
|
if (result && e.cancelable) {
|
|
308
307
|
e.preventDefault();
|
|
309
308
|
}
|
|
310
309
|
};
|
|
311
310
|
|
|
312
|
-
private
|
|
313
|
-
this.
|
|
311
|
+
private _mouseMove = (e: MouseEvent): void => {
|
|
312
|
+
this._handleMouseMove(e, getPositionInfoFromMouseEvent(e));
|
|
314
313
|
};
|
|
315
314
|
|
|
316
|
-
private
|
|
317
|
-
this.
|
|
315
|
+
private _mouseUp = (e: MouseEvent): void => {
|
|
316
|
+
this._handleMouseUp(getPositionInfoFromMouseEvent(e));
|
|
318
317
|
};
|
|
319
318
|
|
|
320
|
-
private
|
|
321
|
-
document.removeEventListener("mousemove", this.
|
|
322
|
-
document.removeEventListener("touchmove", this.
|
|
323
|
-
document.removeEventListener("mouseup", this.
|
|
324
|
-
document.removeEventListener("touchend", this.
|
|
319
|
+
private _removeMouseMoveEventListeners() {
|
|
320
|
+
document.removeEventListener("mousemove", this._mouseMove);
|
|
321
|
+
document.removeEventListener("touchmove", this._touchMove);
|
|
322
|
+
document.removeEventListener("mouseup", this._mouseUp);
|
|
323
|
+
document.removeEventListener("touchend", this._touchEnd);
|
|
325
324
|
}
|
|
326
325
|
|
|
327
|
-
private
|
|
328
|
-
if (this.
|
|
329
|
-
clearTimeout(this.
|
|
326
|
+
private _startMouseDelayTimer(mouseDelay: number): void {
|
|
327
|
+
if (this._mouseDelayTimer) {
|
|
328
|
+
clearTimeout(this._mouseDelayTimer);
|
|
330
329
|
}
|
|
331
330
|
|
|
332
|
-
this.
|
|
333
|
-
if (this.
|
|
334
|
-
this.
|
|
331
|
+
this._mouseDelayTimer = window.setTimeout(() => {
|
|
332
|
+
if (this._mouseDownInfo) {
|
|
333
|
+
this._isMouseDelayMet = true;
|
|
335
334
|
}
|
|
336
335
|
}, mouseDelay);
|
|
337
336
|
|
|
338
|
-
this.
|
|
337
|
+
this._isMouseDelayMet = false;
|
|
339
338
|
}
|
|
340
339
|
|
|
341
|
-
private
|
|
340
|
+
private _touchEnd = (e: TouchEvent): void => {
|
|
342
341
|
if (e.touches.length > 1) {
|
|
343
342
|
return;
|
|
344
343
|
}
|
|
@@ -349,10 +348,10 @@ class MouseHandler {
|
|
|
349
348
|
return;
|
|
350
349
|
}
|
|
351
350
|
|
|
352
|
-
this.
|
|
351
|
+
this._handleMouseUp(getPositionInfoFromTouch(touch, e));
|
|
353
352
|
};
|
|
354
353
|
|
|
355
|
-
private
|
|
354
|
+
private _touchMove = (e: TouchEvent): void => {
|
|
356
355
|
if (e.touches.length > 1) {
|
|
357
356
|
return;
|
|
358
357
|
}
|
|
@@ -363,10 +362,10 @@ class MouseHandler {
|
|
|
363
362
|
return;
|
|
364
363
|
}
|
|
365
364
|
|
|
366
|
-
this.
|
|
365
|
+
this._handleMouseMove(e, getPositionInfoFromTouch(touch, e));
|
|
367
366
|
};
|
|
368
367
|
|
|
369
|
-
private
|
|
368
|
+
private _touchStart = (e: TouchEvent): void => {
|
|
370
369
|
if (e.touches.length > 1) {
|
|
371
370
|
return;
|
|
372
371
|
}
|
|
@@ -377,7 +376,7 @@ class MouseHandler {
|
|
|
377
376
|
return;
|
|
378
377
|
}
|
|
379
378
|
|
|
380
|
-
this.
|
|
379
|
+
this._handleMouseDown(getPositionInfoFromTouch(touch, e));
|
|
381
380
|
};
|
|
382
381
|
}
|
|
383
382
|
|
package/src/node.ts
CHANGED
|
@@ -49,12 +49,12 @@ export class Node implements INode {
|
|
|
49
49
|
if (!this.parent) {
|
|
50
50
|
return null;
|
|
51
51
|
} else {
|
|
52
|
-
const node = this.
|
|
52
|
+
const node = this._createNode(nodeInfo);
|
|
53
53
|
|
|
54
54
|
const childIndex = this.parent.getChildIndex(this);
|
|
55
55
|
this.parent.addChildAtPosition(node, childIndex + 1);
|
|
56
56
|
|
|
57
|
-
node.
|
|
57
|
+
node._loadChildrenFromData(nodeInfo);
|
|
58
58
|
return node;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
@@ -63,12 +63,12 @@ export class Node implements INode {
|
|
|
63
63
|
if (!this.parent) {
|
|
64
64
|
return null;
|
|
65
65
|
} else {
|
|
66
|
-
const node = this.
|
|
66
|
+
const node = this._createNode(nodeInfo);
|
|
67
67
|
|
|
68
68
|
const childIndex = this.parent.getChildIndex(this);
|
|
69
69
|
this.parent.addChildAtPosition(node, childIndex);
|
|
70
70
|
|
|
71
|
-
node.
|
|
71
|
+
node._loadChildrenFromData(nodeInfo);
|
|
72
72
|
return node;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -82,7 +82,7 @@ export class Node implements INode {
|
|
|
82
82
|
*/
|
|
83
83
|
public addChild(node: Node): void {
|
|
84
84
|
this.children.push(node);
|
|
85
|
-
node.
|
|
85
|
+
node._setParent(this);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
/*
|
|
@@ -95,7 +95,7 @@ export class Node implements INode {
|
|
|
95
95
|
*/
|
|
96
96
|
public addChildAtPosition(node: Node, index: number): void {
|
|
97
97
|
this.children.splice(index, 0, node);
|
|
98
|
-
node.
|
|
98
|
+
node._setParent(this);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
public addNodeToIndex(node: Node): void {
|
|
@@ -108,10 +108,10 @@ export class Node implements INode {
|
|
|
108
108
|
if (!this.parent) {
|
|
109
109
|
return null;
|
|
110
110
|
} else {
|
|
111
|
-
const newParent = this.
|
|
111
|
+
const newParent = this._createNode(nodeInfo);
|
|
112
112
|
|
|
113
113
|
if (this.tree) {
|
|
114
|
-
newParent.
|
|
114
|
+
newParent._setParent(this.tree);
|
|
115
115
|
}
|
|
116
116
|
const originalParent = this.parent;
|
|
117
117
|
|
|
@@ -126,10 +126,10 @@ export class Node implements INode {
|
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
public append(nodeInfo: NodeData): Node {
|
|
129
|
-
const node = this.
|
|
129
|
+
const node = this._createNode(nodeInfo);
|
|
130
130
|
this.addChild(node);
|
|
131
131
|
|
|
132
|
-
node.
|
|
132
|
+
node._loadChildrenFromData(nodeInfo);
|
|
133
133
|
return node;
|
|
134
134
|
}
|
|
135
135
|
|
|
@@ -400,7 +400,7 @@ export class Node implements INode {
|
|
|
400
400
|
|
|
401
401
|
const addChildren = (childrenData: NodeData[]): void => {
|
|
402
402
|
for (const child of childrenData) {
|
|
403
|
-
const node = this.
|
|
403
|
+
const node = this._createNode();
|
|
404
404
|
node.initFromData(child);
|
|
405
405
|
this.addChild(node);
|
|
406
406
|
}
|
|
@@ -479,7 +479,7 @@ export class Node implements INode {
|
|
|
479
479
|
this.removeChildren();
|
|
480
480
|
|
|
481
481
|
for (const childData of data) {
|
|
482
|
-
const node = this.
|
|
482
|
+
const node = this._createNode(childData);
|
|
483
483
|
this.addChild(node);
|
|
484
484
|
|
|
485
485
|
if (isNodeRecordWithChildren(childData)) {
|
|
@@ -508,7 +508,7 @@ export class Node implements INode {
|
|
|
508
508
|
// - Or, parent is empty
|
|
509
509
|
return false;
|
|
510
510
|
} else {
|
|
511
|
-
movedNode.parent.
|
|
511
|
+
movedNode.parent._doRemoveChild(movedNode);
|
|
512
512
|
|
|
513
513
|
switch (position) {
|
|
514
514
|
case "after": {
|
|
@@ -543,10 +543,10 @@ export class Node implements INode {
|
|
|
543
543
|
}
|
|
544
544
|
|
|
545
545
|
public prepend(nodeInfo: NodeData): Node {
|
|
546
|
-
const node = this.
|
|
546
|
+
const node = this._createNode(nodeInfo);
|
|
547
547
|
this.addChildAtPosition(node, 0);
|
|
548
548
|
|
|
549
|
-
node.
|
|
549
|
+
node._loadChildrenFromData(nodeInfo);
|
|
550
550
|
return node;
|
|
551
551
|
}
|
|
552
552
|
|
|
@@ -566,7 +566,7 @@ export class Node implements INode {
|
|
|
566
566
|
// remove children from the index
|
|
567
567
|
node.removeChildren();
|
|
568
568
|
|
|
569
|
-
this.
|
|
569
|
+
this._doRemoveChild(node);
|
|
570
570
|
}
|
|
571
571
|
|
|
572
572
|
public removeChildren(): void {
|
|
@@ -624,28 +624,28 @@ export class Node implements INode {
|
|
|
624
624
|
}
|
|
625
625
|
}
|
|
626
626
|
|
|
627
|
-
private
|
|
628
|
-
const nodeClass = this.
|
|
627
|
+
private _createNode(nodeData?: NodeData): Node {
|
|
628
|
+
const nodeClass = this._getNodeClass();
|
|
629
629
|
return new nodeClass(nodeData);
|
|
630
630
|
}
|
|
631
631
|
|
|
632
|
-
private
|
|
632
|
+
private _doRemoveChild(node: Node): void {
|
|
633
633
|
this.children.splice(this.getChildIndex(node), 1);
|
|
634
634
|
this.tree?.removeNodeFromIndex(node);
|
|
635
635
|
}
|
|
636
636
|
|
|
637
|
-
private
|
|
637
|
+
private _getNodeClass(): typeof Node {
|
|
638
638
|
return this.nodeClass ?? this.tree?.nodeClass ?? Node;
|
|
639
639
|
}
|
|
640
640
|
|
|
641
641
|
// Load children data from nodeInfo if it has children
|
|
642
|
-
private
|
|
642
|
+
private _loadChildrenFromData(nodeInfo: NodeData) {
|
|
643
643
|
if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
|
|
644
644
|
this.loadFromData(nodeInfo.children);
|
|
645
645
|
}
|
|
646
646
|
}
|
|
647
647
|
|
|
648
|
-
private
|
|
648
|
+
private _setParent(parent: Node): void {
|
|
649
649
|
this.parent = parent;
|
|
650
650
|
this.tree = parent.tree;
|
|
651
651
|
this.tree?.addNodeToIndex(this);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { DropHint } from "../dragAndDropHandler/types";
|
|
1
|
+
import type { DropHint } from "../dragAndDropHandler/types";
|
|
2
2
|
|
|
3
3
|
class BorderDropHint implements DropHint {
|
|
4
|
-
private
|
|
4
|
+
private _hint?: HTMLElement;
|
|
5
5
|
|
|
6
6
|
constructor(element: HTMLElement, scrollLeft: number) {
|
|
7
7
|
const div = element.querySelector(":scope > .jqtree-element");
|
|
8
8
|
|
|
9
9
|
if (!div) {
|
|
10
|
-
this.
|
|
10
|
+
this._hint = undefined;
|
|
11
11
|
return;
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -19,13 +19,13 @@ class BorderDropHint implements DropHint {
|
|
|
19
19
|
hint.style.width = `${width}px`;
|
|
20
20
|
hint.style.height = `${height}px`;
|
|
21
21
|
|
|
22
|
-
this.
|
|
22
|
+
this._hint = hint;
|
|
23
23
|
|
|
24
|
-
div.append(this.
|
|
24
|
+
div.append(this._hint);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
public remove(): void {
|
|
28
|
-
this.
|
|
28
|
+
this._hint?.remove();
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|