More progress.

Author: Templarian

src/pg/search/search.css

@@ -21,10 +21,10 @@ input {
   border: .0625rem solid var(--pg-search-border-color);
 }
 input:active {
-  box-shadow: 0 0 0 3px var(--pg-search-active-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-search-active-glow, rgba(79, 143, 249, 0.6));
 }
 input:focus {
-  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));
 }
 .active input + svg path {
   fill: #453C4F;

src/pg/tree/tree.css

@@ -2,11 +2,16 @@
   display: contents;
 }
 
-[part="items"] {
+[part=items] {
   display: flex;
   flex-direction: column;
   background: var(--pg-tree-background, transparent);
   padding: 0.25rem;
   gap: 0.25rem;
   --x: 0;
+  --pg-_is-dragging: false;
+}
+
+[part=items].dragging {
+  --pg-_is-dragging: true;
 }

src/pg/tree/tree.ts

@@ -72,7 +72,7 @@ export default class PgTree extends HTMLElement {
         });*/
       }
     });
-    this.addEventListener('itemdragstart', (e: any) => {
+    this.$items.addEventListener('itemdragstart', (e: any) => {
       const { indexes, callback, ctrlKey, shiftKey } = e.detail;
       console.log('testing', indexes);
       const item = this.#getItem(indexes);
@@ -85,6 +85,10 @@ export default class PgTree extends HTMLElement {
       this.#selectedIndexes.set(unproxyItem, indexes);
       callback(this.#selectedIndexes.size);
       this.#calculateDragExcludes();
+      this.$items.classList.toggle('dragging', true);
+    });
+    this.$items.addEventListener('itemdragend', (e: any) => {
+      this.$items.classList.toggle('dragging', false);
     });
   }
 

src/pg/treeItem/treeItem.css

@@ -84,19 +84,13 @@
   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);
+  z-index: 1;
 }
 [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);
+  margin: 0.125rem -0.25rem;
+  z-index: 1;
 }
 [part=item].items.expanded [part=dropbelow] {
   display: none;
@@ -108,10 +102,7 @@
   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);
+  z-index: 1;
 }
 
 [part=item]:not(.items) {
@@ -137,10 +128,7 @@
   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);
+  z-index: 1;
 }
 [part=item]:not(.items) [part=dropon] {
   display: none;
@@ -152,27 +140,22 @@
   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);
+  z-index: 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));
 }
-[part=item].items.selected:not(.expanded) [part=toggle] {
+[part=item].items.selected:not(.expanded):not(.dragging) [part=toggle] {
   border-radius: 0.125rem;
   background-color: var(--pg-tree-item-background-selected, #453C4F);
   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 [part=toggle] {
+[part=item].items.selected.expanded:not(.dragging) [part=toggle] {
   border-radius: 0.125rem;
   background-color: var(--pg-tree-item-background-selected, #453C4F);
   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;
@@ -200,7 +183,6 @@
 
 [part=item].dragging {
   position: relative;
-  opacity: 0.5;
 }
 [part=item].dragging::after {
   position: absolute;
@@ -211,7 +193,8 @@
   bottom: 0;
   left: 0;
   border-radius: 0.25rem;
-  border: 2px dashed #453C4F;
+  background: rgba(255, 255, 255, 0.5);
+  user-select: none;
 }
 
 [part=actions] {
@@ -259,14 +242,27 @@
   display: flex;
   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='rgb(69 60 79)' /></svg>");
 }
-/*
-[part=item].items:not(.expanded):hover [part=toggle] {
+
+[part=dropabove].drop::before,
+[part=dropbelow].drop::before {
+  content: ' ';
+  height: 0.25rem;
+  background-color: rgb(79, 143, 249);
+  border-radius: 0.125rem;
   display: flex;
-  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19' fill='white' /></svg>");
+  margin-top: 0.375rem;
 }
 
-[part=item].items.expanded:hover [part=toggle] {
-  display: flex;
-  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>");
+[part=dropon].drop {
+  margin: -0.25rem !important;
+  border: 4px solid rgb(79, 143, 249);
+  border-radius: 0.25rem;
+}
+
+@container style(--pg-_is-dragging: false) {
+  [part=dropabove],
+  [part=dropon],
+  [part=dropbelow] {
+    display: none;
+  }
 }
-  */

src/pg/treeItem/treeItem.ts

@@ -31,6 +31,9 @@ export default class PgTreeItem extends HTMLElement {
   @Part() $labelButton: HTMLButtonElement;
   @Part() $actions: HTMLDivElement;
   @Part() $items: HTMLDivElement;
+  @Part() $dropabove: HTMLDivElement;
+  @Part() $dropon: HTMLDivElement;
+  @Part() $dropbelow: HTMLDivElement;
 
   connectedCallback() {
     this.$toggle.addEventListener('click', this.#handleToggleClick.bind(this));
@@ -55,6 +58,13 @@ export default class PgTreeItem extends HTMLElement {
     this.$items.addEventListener('down', this.#handleDown.bind(this));
     this.$items.addEventListener('itemdragstart', this.#handleItemDragStart.bind(this));
     this.$items.addEventListener('itemdragend', this.#handleItemDragEnd.bind(this));
+    // Drag
+    this.$dropabove.addEventListener('dragenter', this.#handleDropAboveEnter.bind(this));
+    this.$dropabove.addEventListener('dragleave', this.#handleDropAboveLeave.bind(this));
+    this.$dropon.addEventListener('dragenter', this.#handleDropOnEnter.bind(this));
+    this.$dropon.addEventListener('dragleave', this.#handleDropOnLeave.bind(this));
+    this.$dropbelow.addEventListener('dragenter', this.#handleDropBelowEnter.bind(this));
+    this.$dropbelow.addEventListener('dragleave', this.#handleDropBelowLeave.bind(this));
     forEach({
       container: this.$actions,
       items: this.actions,
@@ -393,4 +403,34 @@ export default class PgTreeItem extends HTMLElement {
     e.detail.indexes.unshift(this.index);
   }
 
+  #handleDropAboveEnter(e: any) {
+    console.log('darg above');
+    e.target.classList.toggle('drop', true);
+  }
+
+  #handleDropAboveLeave(e: any) {
+    console.log('darg leave');
+    e.target.classList.toggle('drop', false);
+  }
+
+  #handleDropOnEnter(e: any) {
+    console.log('darg above');
+    e.target.classList.toggle('drop', true);
+  }
+
+  #handleDropOnLeave(e: any) {
+    console.log('darg leave');
+    e.target.classList.toggle('drop', false);
+  }
+
+  #handleDropBelowEnter(e: any) {
+    console.log('darg above');
+    e.target.classList.toggle('drop', true);
+  }
+
+  #handleDropBelowLeave(e: any) {
+    console.log('darg leave');
+    e.target.classList.toggle('drop', false);
+  }
+
 }