Calculate drag count.

Author: Templarian

src/pg/tree/tree.ts

@@ -83,7 +83,12 @@ export default class PgTree extends HTMLElement {
       }
       item.selected = true;
       this.#selectedIndexes.set(unproxyItem, indexes);
-      callback(this.#selectedIndexes.size);
+      let count = 0;
+      this.#selectedIndexes.forEach((indexes) => {
+        const item = this.#getItem(indexes);
+        count = this.#getDragCount(item, count);
+      });
+      callback(count);
       this.$items.classList.toggle('dragging', true);
     });
     this.$items.addEventListener('itemdragend', (e: any) => {
@@ -92,6 +97,16 @@ export default class PgTree extends HTMLElement {
     this.$items.addEventListener('itemdropenter', this.#handleDropEnter.bind(this));
   }
 
+  #getDragCount(item, count) {
+    count += 1
+    if (item.items && item.items.length > 0) {
+      item.items.forEach((itm) => {
+        count = this.#getDragCount(itm, count);
+      });
+    }
+    return count;
+  }
+
   #handleDropEnter(e: any) {
     const { indexes, callback } = e.detail;
     const excludes = this.#calculateDragExcludes();

src/pg/treeItem/treeItem.css

@@ -181,22 +181,6 @@
   padding-left: calc((var(--x) * 0.5rem) + 1.25rem)
 }
 
-[part=item].dragging {
-  position: relative;
-}
-[part=item].dragging::after {
-  position: absolute;
-  content: ' ';
-  display: flex;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border-radius: 0.25rem;
-  background: rgba(255, 255, 255, 0.5);
-  user-select: none;
-}
-
 [part=actions] {
   display: flex;
   gap: 0.25rem;
@@ -259,10 +243,37 @@
   border-radius: 0.25rem;
 }
 
+[part=item].dragging::after {
+  content: ' ';
+  display: flex;
+  grid-column: 1 / 5;
+  grid-row: 1;
+  border-radius: 0.25rem;
+  background: rgba(255, 255, 255, 0.5);
+  user-select: none;
+  margin: -0.25rem;
+}
+[part=items].dragging {
+  --pg-_is-index-dragging: true
+}
+
 @container style(--pg-_is-dragging: false) {
   [part=dropabove],
   [part=dropon],
   [part=dropbelow] {
     display: none;
   }
 }
+
+@container style(--pg-_is-index-dragging: true) {
+  [part=item]::after {
+    content: ' ';
+    display: flex;
+    grid-column: 1 / 5;
+    grid-row: 1;
+    border-radius: 0.25rem;
+    background: rgba(255, 255, 255, 0.5);
+    user-select: none;
+    margin: -0.25rem;
+  }
+}

src/pg/treeItem/treeItem.ts

@@ -347,6 +347,7 @@ export default class PgTreeItem extends HTMLElement {
       }
     }));
     this.$item.classList.toggle('dragging', true);
+    this.$items.classList.toggle('dragging', true);
     // Generate drag image showing selected item count
     const size = window.devicePixelRatio;
     const canvas = document.createElement('canvas');
@@ -403,6 +404,7 @@ export default class PgTreeItem extends HTMLElement {
       detail: { indexes: [this.index] }
     }));
     this.$item.classList.toggle('dragging', false);
+    this.$items.classList.toggle('dragging', false);
     this.#canvas.remove();
   }