Clear drag.

Author: Templarian

src/pg/tree/tree.ts

@@ -192,6 +192,7 @@ export default class PgTree extends HTMLElement {
           this.#getItem(parent).items.splice(position === 'after' ? index + 1 : index, 0, cache);
         }
         this.#selectedIndexes.clear();
+        this.$items.classList.toggle('dragging', false);
       }
     }
   }

src/pg/treeItem/treeItem.css

@@ -28,7 +28,7 @@
   align-items: center;
   font-family: var(--pg-font-family);
   font-size: var(--pg-tree-item-font-size, 1rem);
-  margin: -0.25rem -0.75rem -0.25rem -0.25rem;
+  margin: -0.25rem -0.25rem -0.25rem -0.25rem;
   padding: 0 0.75rem 0 0.25rem;
 }
 
@@ -120,13 +120,13 @@
 }
 [part=item].items.selected:not(.expanded):not(.dragging) [part=toggle] {
   border-radius: 0.125rem;
-  background-color: var(--pg-tree-item-background-selected, #453C4F);
+  background-color: var(--pg-tree-item-background-selected, rgb(79, 143, 249));
   background-image: url("data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill='white' /></svg>") !important;
 }
 
 [part=item].items.selected.expanded:not(.dragging) [part=toggle] {
   border-radius: 0.125rem;
-  background-color: var(--pg-tree-item-background-selected, #453C4F);
+  background-color: var(--pg-tree-item-background-selected, rgb(79, 143, 249));
   background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11' fill='white' /></svg>") !important;
 }
 
@@ -143,7 +143,7 @@
   margin-top: -0.125rem;
   margin-bottom: -0.125rem;
   border-radius: 0.125rem;
-  background: #453C4F;
+  background: rgb(79, 143, 249);
 }
 
 [part=item]:not(.dragging):not(.items).selected [part=selected] {

src/pg/treeItem/treeItem.ts

@@ -45,6 +45,7 @@ export default class PgTreeItem extends HTMLElement {
     this.$item.addEventListener('dragend', this.#handleDragEnd.bind(this));
     this.$labelButton.addEventListener('dblclick', this.#handleDoubleClick.bind(this));
     this.$labelButton.addEventListener('click', this.#handleClick.bind(this));
+    this.$labelButton.addEventListener('keydown', this.#handleKeyDownLabel.bind(this));
     this.$iconButton.addEventListener('dblclick', this.#handleIconDoubleClick.bind(this));
     this.$iconButton.addEventListener('click', this.#handleIconClick.bind(this));
     this.$iconButton.addEventListener('keydown', this.#handleIconKeyDown.bind(this));
@@ -88,6 +89,10 @@ export default class PgTreeItem extends HTMLElement {
     }
   }
 
+  disconnectedCallback() {
+    console.log('disconnect', this.index);
+  }
+
   #initItemsOnce = true;
   #initItems() {
     if (this.#initItemsOnce) {
@@ -178,6 +183,14 @@ export default class PgTreeItem extends HTMLElement {
     }));
   }
 
+  #handleKeyDownLabel(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      this.#enableRename();
+      e.preventDefault();
+    }
+    // todo arrow keys
+  }
+
   #handlePointerEnter() {
     this.dispatchEvent(new CustomEvent('enter', {
       bubbles: true,
@@ -246,12 +259,7 @@ export default class PgTreeItem extends HTMLElement {
     e.preventDefault();
   }
 
-  #ignoreNextClick = false;
-  #handleDoubleClick(e: MouseEvent) {
-    const { ctrlKey, shiftKey } = e;
-    if (ctrlKey || shiftKey) {
-      return;
-    }
+  #enableRename() {
     this.$labelButton.classList.add('hide');
     this.$actions.classList.add('hide');
     this.$input.classList.remove('hide');
@@ -266,14 +274,23 @@ export default class PgTreeItem extends HTMLElement {
         indexes: [this.index]
       }
     }));
+  }
+
+  #ignoreNextClick = false;
+  #handleDoubleClick(e: MouseEvent) {
+    const { ctrlKey, shiftKey } = e;
+    if (ctrlKey || shiftKey) {
+      return;
+    }
+    this.#enableRename();
     e.preventDefault();
   }
 
   #handleBlur() {
     this.$labelButton.classList.remove('hide');
     this.$actions.classList.remove('hide');
     this.$input.classList.add('hide');
-    this.$labelButton.focus();
+    this.$labelButton.click();
     this.dispatchEvent(new CustomEvent('rename', {
       bubbles: true,
       composed: true,
@@ -315,7 +332,7 @@ export default class PgTreeItem extends HTMLElement {
         this.$actions.classList.remove('hide');
         this.$input.classList.add('hide');
         this.$input.value = this.label;
-        this.$labelButton.focus();
+        this.$labelButton.click();
         break;
       case 'ArrowUp':
         this.dispatchEvent(new CustomEvent('up', {