From 44d148c69f89c92f7c16ec1ae7f68b59ae5fa870 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 12 Jan 2024 19:09:22 +0100
Subject: [PATCH] refactors

---
 .../sorter-group.ts                           | 10 +--
 .../packages/core/sorter/sorter.controller.ts | 71 ++++++++++---------
 2 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
index 23ff6e433a..21cf7bfeec 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
@@ -37,16 +37,18 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 	#sorter = new UmbSorterController<ModelEntryType, ExampleSorterItem>(this, {
 		...SORTER_CONFIG,
 		performItemInsert: ({ item, newIndex }) => {
+			const oldValue = [...this._items];
 			this._items.splice(newIndex, 0, item);
 			//console.log('inserted', item.name, 'at', newIndex, '	', this._items.map((x) => x.name).join(', '));
-			this.requestUpdate('_items');
+			this.requestUpdate('items', oldValue);
 			return true;
 		},
 		performItemRemove: ({ item }) => {
+			const oldValue = [...this._items];
 			const indexToMove = this._items.findIndex((x) => x.name === item.name);
 			this._items.splice(indexToMove, 1);
 			//console.log('removed', item.name, 'at', indexToMove, '	', this._items.map((x) => x.name).join(', '));
-			this.requestUpdate('_items');
+			this.requestUpdate('items', oldValue);
 			return true;
 		},
 	});
@@ -64,8 +66,8 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		return html`
 			<div class="sorter-container">
 				${repeat(
-					this._items,
-					(item, index) => item.name + '_ ' + index,
+					this.items,
+					(item) => item.name,
 					(item) =>
 						html`<example-sorter-item name=${item.name}>
 							<button @click=${() => this.removeItem(item)}>Delete</button>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
index e6ea2ff7e0..4a37a14a0d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
@@ -163,12 +163,12 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 			mutations.forEach((mutation) => {
 				mutation.addedNodes.forEach((addedNode) => {
 					if ((addedNode as HTMLElement).matches && (addedNode as HTMLElement).matches(this.#config.itemSelector)) {
-						this.setupItem(addedNode as HTMLElement);
+						this.setupItem(addedNode as ElementType);
 					}
 				});
 				mutation.removedNodes.forEach((removedNode) => {
 					if ((removedNode as HTMLElement).matches && (removedNode as HTMLElement).matches(this.#config.itemSelector)) {
-						this.destroyItem(removedNode as HTMLElement);
+						this.destroyItem(removedNode as ElementType);
 					}
 				});
 			});
@@ -242,9 +242,8 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 
 		// If we have a currentItem and the element matches, we should set the currentElement to this element.
 		if (this.#currentItem && this.#config.compareElementToModel(element, this.#currentItem)) {
-			console.log('got new current element', element);
-			this.#currentElement = element;
-			this.#setupPlaceholderStyle();
+			console.log('got new current element', this.#currentElement === element, element);
+			this.#setCurrentElement(element);
 		}
 	}
 
@@ -274,26 +273,8 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 		}
 	}
 
-	#handleDragStart = (event: DragEvent) => {
-		console.log('#drag start!');
-
-		if (this.#currentElement) {
-			this.#handleDragEnd();
-		}
-
-		event.stopPropagation();
-		if (event.dataTransfer) {
-			event.dataTransfer.effectAllowed = 'move'; // copyMove when we enhance the drag with clipboard data.
-			event.dataTransfer.dropEffect = 'none'; // visual feedback when dropped.
-		}
-
-		if (!this.#scrollElement) {
-			this.#scrollElement = getParentScrollElement(this.#containerElement, true);
-		}
-
-		const element = (event.target as HTMLElement).closest(this.#config.itemSelector);
-
-		if (!element) return;
+	#setCurrentElement(element: ElementType) {
+		this.#currentElement = element;
 
 		this.#currentDragElement = this.#config.draggableSelector
 			? element.querySelector(this.#config.draggableSelector) ?? undefined
@@ -308,9 +289,33 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 			return;
 		}
 
-		this.#currentElement = element as ElementType;
-		this.#currentDragRect = this.#currentDragElement.getBoundingClientRect();
-		this.#currentItem = this.getItemOfElement(this.#currentElement);
+		this.#setupPlaceholderStyle();
+	}
+
+	#handleDragStart = (event: DragEvent) => {
+		const element = (event.target as HTMLElement).closest(this.#config.itemSelector);
+		if (!element) return;
+
+		console.log('#drag start!');
+
+		if (this.#currentElement && this.#currentElement !== element) {
+			console.log('#drag start, calls END!!!!!');
+			this.#handleDragEnd();
+		}
+
+		event.stopPropagation();
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = 'move'; // copyMove when we enhance the drag with clipboard data.
+			event.dataTransfer.dropEffect = 'none'; // visual feedback when dropped.
+		}
+
+		if (!this.#scrollElement) {
+			this.#scrollElement = getParentScrollElement(this.#containerElement, true);
+		}
+
+		this.#setCurrentElement(element as ElementType);
+		this.#currentDragRect = this.#currentDragElement?.getBoundingClientRect();
+		this.#currentItem = this.getItemOfElement(this.#currentElement!);
 		if (!this.#currentItem) {
 			console.error('Could not find item related to this element.');
 			return;
@@ -319,17 +324,16 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 		// Get the current index of the item:
 		this.#currentIndex = this.#model.indexOf(this.#currentItem);
 
-		this.#currentElement.style.transform = 'translateZ(0)'; // Solves problem with FireFox and ShadowDom in the drag-image.
+		this.#currentElement!.style.transform = 'translateZ(0)'; // Solves problem with FireFox and ShadowDom in the drag-image.
 
 		if (this.#config.dataTransferResolver) {
 			this.#config.dataTransferResolver(event.dataTransfer, this.#currentItem);
 		}
 
 		if (this.#config.onStart) {
-			this.#config.onStart({ item: this.#currentItem, element: this.#currentElement });
+			this.#config.onStart({ item: this.#currentItem, element: this.#currentElement! });
 		}
 
-		console.log('add eventlisteners to window');
 		window.addEventListener('dragover', this.#handleDragMove);
 		window.addEventListener('dragend', this.#handleDragEnd);
 
@@ -346,12 +350,13 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 
 	#handleDragEnd = async () => {
 		console.log('#drag end!');
+		window.removeEventListener('dragover', this.#handleDragMove);
+		window.removeEventListener('dragend', this.#handleDragEnd);
+
 		if (!this.#currentElement || !this.#currentItem) {
 			return;
 		}
 
-		window.removeEventListener('dragover', this.#handleDragMove);
-		window.removeEventListener('dragend', this.#handleDragEnd);
 		this.#currentElement.style.transform = '';
 		this.#removePlaceholderStyle();