More bug fixes for drag/drop.

Author: Templarian

src/pg/tree/__examples__/basic/basic.ts

@@ -3,6 +3,7 @@ import PgTree from '../../tree';
 
 import template from './basic.html';
 import PgTreeButtonIcon from '../../../treeButtonIcon/treeButtonIcon';
+import PgTreeItem from 'pg/treeItem/treeItem';
 
 const IconAccount = 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z';
 const IconFile = 'M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z';
@@ -89,8 +90,8 @@ export default class XPgTreeBasic extends HTMLElement {
       // action clicked
     });
     this.$tree.addEventListener('select', (e: any) => {
-      console.log(e.detail.items.size);
-      this.#selectedItems = Array.from(e.detail.items);
+      console.log(e.detail.items.length);
+      this.#selectedItems = e.detail.items;
     });
     this.$tree.items = [
       createItem('Item 1', true),
@@ -109,9 +110,8 @@ export default class XPgTreeBasic extends HTMLElement {
 
     let updatedTimes = 0;
     this.$updateItem.addEventListener('click', () => {
-      this.#selectedItems.forEach((selected) => {
-        const item = this.#getItem(selected);
-        item.label = `Updated ${updatedTimes++}`;
+      this.#selectedItems.forEach((selected: PgTreeItem) => {
+        selected.label = `Updated ${updatedTimes++}`;
       });
     });
   }

src/pg/tree/tree.ts

@@ -35,25 +35,24 @@ export default class PgTree extends HTMLElement {
       e.stopPropagation();
       const { indexes, type, ctrlKey, shiftKey } = e.detail;
       const item = this.#getItem(indexes);
-      const selectedCount = this.#selected.size;
+      const selectedCount = this.#selectedIndexes.size;
       const unproxyItem = getProxyValue(item);
-      if (!ctrlKey && selectedCount && !this.#selected.has(unproxyItem)) {
-        this.#selected.forEach((x: any) => x.selected = false);
-        this.#selected.clear();
+      if (!ctrlKey && selectedCount && !this.#selectedIndexes.has(unproxyItem)) {
+        this.#selectedIndexes.forEach((x: any) => this.#getItem(x).selected = false);
         this.#selectedIndexes.clear();
       }
       item.selected = type === 'rename' ? true : !item.selected;
       if (item.selected) {
-        this.#selected.add(item);
         this.#selectedIndexes.set(unproxyItem, indexes);
       } else {
-        this.#selected.delete(item);
         this.#selectedIndexes.delete(unproxyItem);
       }
       // Dispatch Event
       this.dispatchEvent(new CustomEvent('select', {
         detail: {
-          items: this.#selected
+          items: Array.from(this.#selectedIndexes).map(([key, value]) => {
+            return this.#getItem(value);
+          })
         }
       }));
     });

src/pg/treeItem/treeItem.css

@@ -94,6 +94,22 @@
   padding-left: calc((var(--x) * 0.5rem) + 1.25rem)
 }
 
+[part=item].dragging {
+  position: relative;
+  opacity: 0.5;
+}
+[part=item].dragging::after {
+  position: absolute;
+  content: ' ';
+  display: flex;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 0.25rem;
+  border: 2px dashed #453C4F;
+}
+
 [part=actions] {
   display: flex;
   gap: 0.25rem;

src/pg/treeItem/treeItem.html

@@ -1,4 +1,4 @@
-<div part="item">
+<div part="item" draggable="true">
   <button part="toggle"></button>
   <button part="iconButton">
     <pg-icon part="icon"></pg-icon>

src/pg/treeItem/treeItem.ts

@@ -37,6 +37,8 @@ export default class PgTreeItem extends HTMLElement {
     this.$item.addEventListener('action', this.#handleAction.bind(this));
     this.$item.addEventListener('pointerenter', this.#handlePointerEnter.bind(this));
     this.$item.addEventListener('pointerleave', this.#handlePointerLeave.bind(this));
+    this.$item.addEventListener('dragstart', this.#handleDragStart.bind(this));
+    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.$iconButton.addEventListener('dblclick', this.#handleIconDoubleClick.bind(this));
@@ -304,4 +306,59 @@ export default class PgTreeItem extends HTMLElement {
     }
   }
 
+  #handleDragStart(event) {
+    this.$item.classList.toggle('dragging', true);
+    // Generate drag image showing selected item count
+    const size = window.devicePixelRatio;
+    const canvas = document.createElement('canvas');
+    document.body.append(canvas);
+    // Larger than required!
+    canvas.width = 100 * size;
+    canvas.height = 40 * size;
+    canvas.style.width = `${canvas.width / size}px`;
+    // overlap cursor offset
+    const offsetInline = 10;
+    const fontSize = 16;
+    const paddingBlock = 6;
+    const paddingInline = 6;
+    var ctx = canvas.getContext('2d');
+    if (ctx) {
+      const text = '0';
+      ctx.font = `bold ${fontSize * size}px Segoe UI`;
+      const textSize = ctx.measureText(text);
+      ctx.fillStyle = '#453C4F';
+      ctx.beginPath();
+      ctx.roundRect(
+        (offsetInline) * size,
+        0,
+        (textSize.width + (paddingInline * 2)) * size,
+        (fontSize + (paddingBlock * 2)) * size,
+        8 + (size * 2)
+      );
+      ctx.fill();
+      ctx.fillStyle = '#FFF';
+      ctx.beginPath();
+      ctx.roundRect(
+        (offsetInline + 2) * size,
+        2 * size,
+        ((textSize.width + (paddingInline * 2) - 4) * size),
+        ((fontSize + (paddingBlock * 2) - 4) * size),
+        8
+      );
+      ctx.fill();
+      ctx.fillStyle = '#453C4F';
+      ctx.fillText(
+        text,
+        (offsetInline + paddingInline + 4) * size,
+        (fontSize + paddingBlock - 2) * size
+      );
+    }
+
+    event.dataTransfer.setDragImage(canvas, 0, 0);
+  }
+
+  #handleDragEnd(event) {
+    this.$item.classList.toggle('dragging', false);
+  }
+
 }