Progress.

Author: Templarian

src/pg/tree/tree.ts

@@ -15,7 +15,6 @@ export default class PgTree extends HTMLElement {
 
   @Part() $items: HTMLDivElement;
 
-  #selected = new Set();
   #selectedIndexes = new Map();
 
   connectedCallback() {
@@ -85,6 +84,7 @@ export default class PgTree extends HTMLElement {
       item.selected = true;
       this.#selectedIndexes.set(unproxyItem, indexes);
       callback(this.#selectedIndexes.size);
+      this.#calculateDragExcludes();
     });
   }
 
@@ -103,4 +103,12 @@ export default class PgTree extends HTMLElement {
   unselect(indexes: number[]) {
 
   }
+
+  #calculateDragExcludes() {
+    const exclude: string[] = [];
+    this.#selectedIndexes.forEach((indexes) => {
+      exclude.push(indexes.join(','));
+    });
+    return exclude;
+  }
 }

src/pg/treeItem/treeItem.css

@@ -51,7 +51,7 @@
   background: var(--pg-tree-item-background, transparent);
   border-radius: 0.25rem;
   padding: 0.25rem;
-  gap: 0.5rem;
+  gap: 0 0.5rem;
   user-select: none;
   padding-left: calc((var(--x) * 0.5rem) + 0.25rem);
   transition: background-color 0.1s ease-out;
@@ -61,23 +61,108 @@
   grid-template-columns: min-content min-content auto min-content;
   grid-template-rows: auto;
 }
+[part=item].items [part=toggle] {
+  grid-row: 1;
+  grid-column: 1;
+}
+[part=item].items [part=iconButton] {
+  grid-row: 1;
+  grid-column: 2;
+}
+[part=item].items [part=labelButton] {
+  grid-row: 1;
+  grid-column: 3;
+}
+[part=item].items [part=actions] {
+  grid-row: 1;
+  grid-column: 4;
+}
+[part=item].items [part=dropabove] {
+  grid-row: 1;
+  grid-column: 1 / 5;
+  align-self: flex-start;
+  transform: translateY(-0.875rem);
+  height: 1rem;
+  margin: 0 -0.25rem 0 -0.25rem;
+  background: rgba(255, 0, 0, 0.1);
+}
+[part=item].items [part=dropabove]:hover {
+  background: rgba(255, 0, 0, 0.2);
+}
+[part=item].items [part=dropon] {
+  grid-row: 1;
+  grid-column: 1 / 5;
+  margin: -0.25rem;
+  background: rgba(255, 0, 0, 0.1);
+}
+[part=item].items [part=dropon]:hover {
+  background: rgba(255, 0, 0, 0.2);
+}
+[part=item].items.expanded [part=dropbelow] {
+  display: none;
+}
+[part=item].items [part=dropbelow] {
+  grid-row: 1;
+  grid-column: 1 / 5;
+  align-self: flex-end;
+  transform: translateY(0.875rem);
+  height: 1rem;
+  margin: 0 -0.25rem 0 -0.25rem;
+  background: rgba(255, 0, 0, 0.1);
+}
+[part=item].items [part=dropbelow]:hover {
+  background: rgba(255, 0, 0, 0.2);
+}
+
 [part=item]:not(.items) {
   grid-template-columns: min-content auto min-content;
   grid-template-rows: auto;
 }
-[part=dropon] {
-  display: none;
+[part=item]:not(.items) [part=iconButton] {
+  grid-row: 1;
+  grid-column: 1;
+}
+[part=item]:not(.items) [part=labelButton] {
+  grid-row: 1;
+  grid-column: 2;
+}
+[part=item]:not(.items) [part=actions] {
+  grid-row: 1;
+  grid-column: 3;
+}
+[part=item]:not(.items) [part=dropabove] {
   grid-row: 1;
+  grid-column: 1 / 4;
+  align-self: flex-start;
+  transform: translateY(-0.875rem);
+  height: 1rem;
+  margin: 0 -0.25rem 0 -1.25rem;
+  background: rgba(255, 0, 0, 0.1);
+}
+[part=item]:not(.items) [part=dropabove]:hover {
+  background: rgba(255, 0, 0, 0.2);
 }
-[part=dropbelow] {
+[part=item]:not(.items) [part=dropon] {
   display: none;
+}
+[part=item]:not(.items) [part=dropbelow] {
   grid-row: 1;
+  grid-column: 1 / 4;
+  align-self: flex-end;
+  transform: translateY(0.875rem);
+  height: 1rem;
+  margin: 0 -0.25rem 0 -1.25rem;
+  background: rgba(255, 0, 0, 0.1);
+  z-index: 1;
+}
+[part=item]:not(.items) [part=dropbelow]:hover {
+  background: rgba(255, 0, 0, 0.2);
 }
 
+
 [part=item]:hover {
   background: var(--pg-tree-item-background-hover, rgb(69, 60, 79, 0.1));
 }
-
 [part=item].items.selected {
   background-color: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.1));
 }

src/pg/treeItem/treeItem.html

@@ -8,6 +8,7 @@
     <span part="label"></span>
   </button>
   <div part="actions"></div>
+  <div part="dropabove"></div>
   <div part="dropon"></div>
   <div part="dropbelow"></div>
 </div>