tp-elements/tp-tree-nav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix some bugs

Browse Source
This commit is contained in:
trading_peter
2026-02-14 23:46:03 +01:00
parent 64aacf2ac8
commit 1bfb9bb29b
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
mixins/tree-dnd.js
View File

@@ -22,6 +22,7 @@ export const TreeDnDMixin = (superClass) => class TreeDnDMixin extends superClas
_onDragEnd(item, e) { _onDragEnd(item, e) {
this._dragSource = null; this._dragSource = null;
this._clearAllDragClasses();
} }
_onDragOver(item, e) { _onDragOver(item, e) {
@@ -66,7 +67,7 @@ export const TreeDnDMixin = (superClass) => class TreeDnDMixin extends superClas
e.dataTransfer.dropEffect = 'move'; e.dataTransfer.dropEffect = 'move';
this._clearDragClasses(row); this._clearAllDragClasses();
row.classList.add(`drag-over-${position}`); row.classList.add(`drag-over-${position}`);
if (dragDepth !== undefined) { if (dragDepth !== undefined) {
row.style.setProperty('--drag-depth', dragDepth); row.style.setProperty('--drag-depth', dragDepth);
@@ -99,7 +100,7 @@ export const TreeDnDMixin = (superClass) => class TreeDnDMixin extends superClas
return; return;
} }
const { target: logicalTarget, position: logicalPosition } = this._resolveDropTarget(item, position, e); const { target: logicalTarget, position: logicalPosition, depth: logicalDepth } = this._resolveDropTarget(item, position, e);
if (this._isNoOp(this._dragSource, logicalTarget, logicalPosition)) { if (this._isNoOp(this._dragSource, logicalTarget, logicalPosition)) {
return; return;
@@ -114,6 +115,7 @@ export const TreeDnDMixin = (superClass) => class TreeDnDMixin extends superClas
source: this._dragSource, source: this._dragSource,
target: logicalTarget, target: logicalTarget,
position: logicalPosition, position: logicalPosition,
depth: logicalDepth,
originalEvent: e originalEvent: e
}, },
bubbles: true, bubbles: true,
@@ -127,6 +129,9 @@ export const TreeDnDMixin = (superClass) => class TreeDnDMixin extends superClas
if (!source || !target) return true; if (!source || !target) return true;
if (source.key === target.key) return true; if (source.key === target.key) return true;
// Prevent dropping a node into its own subtree (would create a cycle).
if (target.key.startsWith(source.key + '/')) return true;
const srcPathStr = source.path.slice(0, -1).join('/'); const srcPathStr = source.path.slice(0, -1).join('/');
const tgtPathStr = target.path.slice(0, -1).join('/'); const tgtPathStr = target.path.slice(0, -1).join('/');
@@ -174,7 +179,7 @@ export const TreeDnDMixin = (superClass) => class TreeDnDMixin extends superClas
if (position === 'after' && e) { if (position === 'after' && e) {
const nextItem = this._flatItems[index + 1]; const nextItem = this._flatItems[index + 1];
const currentDepth = currentItem.depth; const currentDepth = currentItem.depth;
const nextDepth = nextItem ? nextItem.depth : -1; const nextDepth = nextItem ? nextItem.depth : 0;
if (nextDepth < currentDepth) { if (nextDepth < currentDepth) {
const row = e.currentTarget; const row = e.currentTarget;
@@ -211,4 +216,11 @@ export const TreeDnDMixin = (superClass) => class TreeDnDMixin extends superClas
row.classList.remove('drag-over-inside', 'drag-over-before', 'drag-over-after'); row.classList.remove('drag-over-inside', 'drag-over-before', 'drag-over-after');
row.style.removeProperty('--drag-depth'); row.style.removeProperty('--drag-depth');
} }
_clearAllDragClasses() {
const rows = this.shadowRoot?.querySelectorAll('.drag-over-inside, .drag-over-before, .drag-over-after');
if (rows) {
rows.forEach((row) => this._clearDragClasses(row));
}
}
}; };