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

Simplify dragged element

Browse Source
This commit is contained in:
trading_peter
2025-12-17 22:42:25 +01:00
parent b92bbeb0c2
commit 209249806b
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-tree-nav", "name": "@tp/tp-tree-nav",
"version": "1.2.0", "version": "1.2.1",
"description": "", "description": "",
"main": "tp-tree-nav.js", "main": "tp-tree-nav.js",
"scripts": { "scripts": {

23
tp-tree-nav.js
View File

@@ -135,6 +135,8 @@ export class TpTreeNav extends Position(LitElement) {
opacity: 0.5; opacity: 0.5;
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
top: -1000px;
left: -1000px;
} }
` `
]; ];
@@ -528,21 +530,16 @@ export class TpTreeNav extends Position(LitElement) {
const row = e.currentTarget; const row = e.currentTarget;
const rect = row.getBoundingClientRect(); const rect = row.getBoundingClientRect();
const clone = row.cloneNode(true); const clone = document.createElement('div');
clone.classList.add('drag-clone'); clone.classList.add('drag-clone');
clone.setAttribute('part', 'drag-clone');
clone.style.width = `${rect.width}px`;
clone.style.height = `${rect.height}px`;
clone.style.top = '-1000px';
clone.style.left = '-1000px';
clone.textContent = row.textContent;
this.shadowRoot.appendChild(clone); this.shadowRoot.appendChild(clone);
const offsetX = e.clientX - rect.left; const offsetX = e.clientX - rect.left;
const offsetY = e.clientY - rect.top; const offsetY = e.clientY - rect.top;
e.dataTransfer.setDragImage(clone, offsetX, offsetY); e.dataTransfer.setDragImage(clone, 0, 0);
setTimeout(() => { setTimeout(() => {
clone.remove(); clone.remove();
@@ -716,9 +713,13 @@ export class TpTreeNav extends Position(LitElement) {
if (nextDepth < currentDepth) { if (nextDepth < currentDepth) {
// We are at a step down. Calculate target depth from mouse X. // We are at a step down. Calculate target depth from mouse X.
const indent = 16; // Hardcoded for now, matching CSS default const row = e.currentTarget;
const padding = 8; // Matching CSS padding const style = getComputedStyle(row);
const rowRect = e.currentTarget.getBoundingClientRect(); const indentVal = style.getPropertyValue('--tp-tree-indent').trim();
const indent = indentVal ? parseInt(indentVal, 10) : 16;
const padding = parseFloat(style.paddingLeft) || 8;
const rowRect = row.getBoundingClientRect();
const mouseX = e.clientX - rowRect.left; const mouseX = e.clientX - rowRect.left;
// Calculate desired depth based on mouse position // Calculate desired depth based on mouse position