From 209249806b2443daa6de35975f764bd34f7ba264 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Wed, 17 Dec 2025 22:42:25 +0100
Subject: [PATCH] Simplify dragged element

---
 package.json   |  2 +-
 tp-tree-nav.js | 23 ++++++++++++-----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 3940ea2..2c4ab60 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-tree-nav",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "",
   "main": "tp-tree-nav.js",
   "scripts": {
diff --git a/tp-tree-nav.js b/tp-tree-nav.js
index 9a26132..4978466 100644
--- a/tp-tree-nav.js
+++ b/tp-tree-nav.js
@@ -135,6 +135,8 @@ export class TpTreeNav extends Position(LitElement) {
           opacity: 0.5;
           position: absolute;
           z-index: 1000;
+          top: -1000px;
+          left: -1000px;
         }
       `
     ];
@@ -528,21 +530,16 @@ export class TpTreeNav extends Position(LitElement) {
 
     const row = e.currentTarget;
     const rect = row.getBoundingClientRect();
-    const clone = row.cloneNode(true);
+    const clone = document.createElement('div');
     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);
     
     const offsetX = e.clientX - rect.left;
     const offsetY = e.clientY - rect.top;
     
-    e.dataTransfer.setDragImage(clone, offsetX, offsetY);
+    e.dataTransfer.setDragImage(clone, 0, 0);
     
     setTimeout(() => {
       clone.remove();
@@ -716,9 +713,13 @@ export class TpTreeNav extends Position(LitElement) {
 
         if (nextDepth < currentDepth) {
             // We are at a step down. Calculate target depth from mouse X.
-            const indent = 16; // Hardcoded for now, matching CSS default
-            const padding = 8; // Matching CSS padding
-            const rowRect = e.currentTarget.getBoundingClientRect();
+            const row = e.currentTarget;
+            const style = getComputedStyle(row);
+            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;
             
             // Calculate desired depth based on mouse position