@umbraco-cms/backoffice 14.0.0--preview005-d8ecd776 → 14.0.0--preview005-b4989b95

package/dist-cms/packages/core/sorter/sorter.controller.js

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _UmbSorterController_instances, _UmbSorterController_host, _UmbSorterController_config, _UmbSorterController_observer, _UmbSorterController_model, _UmbSorterController_rqaId, _UmbSorterController_containerElement, _UmbSorterController_currentContainerCtrl, _UmbSorterController_currentContainerElement, _UmbSorterController_useContainerShadowRoot, _UmbSorterController_scrollElement, _UmbSorterController_currentElement, _UmbSorterController_currentDragElement, _UmbSorterController_currentDragRect, _UmbSorterController_currentItem, _UmbSorterController_currentIndex, _UmbSorterController_dragX, _UmbSorterController_dragY, _UmbSorterController_lastIndicationContainerCtrl, _UmbSorterController_setupPlaceholderStyle, _UmbSorterController_removePlaceholderStyle, _UmbSorterController_setCurrentElement, _UmbSorterController_handleDragStart, _UmbSorterController_handleDragEnd, _UmbSorterController_handleDragMove, _UmbSorterController_updateDragMove, _UmbSorterController_moveElementTo, _UmbSorterController_autoScrollRAF, _UmbSorterController_autoScrollEl, _UmbSorterController_performAutoScroll, _UmbSorterController_stopAutoScroll;
+var _UmbSorterController_instances, _a, _UmbSorterController_host, _UmbSorterController_config, _UmbSorterController_observer, _UmbSorterController_model, _UmbSorterController_rqaId, _UmbSorterController_containerElement, _UmbSorterController_useContainerShadowRoot, _UmbSorterController_scrollElement, _UmbSorterController_dragX, _UmbSorterController_dragY, _UmbSorterController_lastIndicationContainerCtrl, _UmbSorterController_setupPlaceholderStyle, _UmbSorterController_removePlaceholderStyle, _UmbSorterController_setCurrentElement, _UmbSorterController_handleDragStart, _UmbSorterController_handleDragEnd, _UmbSorterController_handleDragMove, _UmbSorterController_updateDragMove, _UmbSorterController_moveElementTo, _UmbSorterController_autoScrollRAF, _UmbSorterController_autoScrollEl, _UmbSorterController_performAutoScroll, _UmbSorterController_stopAutoScroll;
 const autoScrollSensitivity = 50;
 const autoScrollSpeed = 16;
 function isWithinRect(x, y, rect, modifier = 0) {
@@ -45,9 +45,6 @@ function getParentScrollElement(el, includeSelf) {
     }
     return null;
 }
-function preventDragOver(e) {
-    e.preventDefault();
-}
 function setupIgnorerElements(element, ignorerSelectors) {
     ignorerSelectors.split(',').forEach(function (criteria) {
         element.querySelectorAll(criteria.trim()).forEach(setupPreventEvent);
@@ -72,6 +69,10 @@ function destroyPreventEvent(element) {
  */
 export class UmbSorterController {
     get controllerAlias() {
+        // We only support one Sorter Controller pr. Controller Host.
+        return 'umbSorterController';
+    }
+    get identifier() {
         return __classPrivateFieldGet(this, _UmbSorterController_config, "f").identifier;
     }
     constructor(host, config) {
@@ -82,15 +83,8 @@ export class UmbSorterController {
         _UmbSorterController_model.set(this, []);
         _UmbSorterController_rqaId.set(this, void 0);
         _UmbSorterController_containerElement.set(this, void 0);
-        _UmbSorterController_currentContainerCtrl.set(this, this);
-        _UmbSorterController_currentContainerElement.set(this, null);
         _UmbSorterController_useContainerShadowRoot.set(this, void 0);
         _UmbSorterController_scrollElement.set(this, void 0);
-        _UmbSorterController_currentElement.set(this, void 0);
-        _UmbSorterController_currentDragElement.set(this, void 0);
-        _UmbSorterController_currentDragRect.set(this, void 0);
-        _UmbSorterController_currentItem.set(this, void 0);
-        _UmbSorterController_currentIndex.set(this, void 0);
         _UmbSorterController_dragX.set(this, 0);
         _UmbSorterController_dragY.set(this, 0);
         _UmbSorterController_lastIndicationContainerCtrl.set(this, null);
@@ -100,17 +94,12 @@ export class UmbSorterController {
                 : __classPrivateFieldGet(this, _UmbSorterController_host, "f")) ?? __classPrivateFieldGet(this, _UmbSorterController_host, "f");
             __classPrivateFieldSet(this, _UmbSorterController_containerElement, containerEl, "f");
             __classPrivateFieldSet(this, _UmbSorterController_useContainerShadowRoot, __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f") === __classPrivateFieldGet(this, _UmbSorterController_host, "f"), "f");
-            if (!__classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f") || __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f") === __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")) {
-                __classPrivateFieldSet(this, _UmbSorterController_currentContainerElement, containerEl, "f");
-            }
             // Only look at the shadowRoot if the containerElement is host.
             const containerElement = __classPrivateFieldGet(this, _UmbSorterController_useContainerShadowRoot, "f")
                 ? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").shadowRoot ?? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")
                 : __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f");
-            containerElement.addEventListener('dragover', preventDragOver);
-            __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")['__umbBlockGridSorterController'] = () => {
-                return this;
-            };
+            containerElement.addEventListener('dragover', this._itemDraggedOver);
+            // TODO: Do we need to handle dragleave?
             __classPrivateFieldGet(this, _UmbSorterController_observer, "f").disconnect();
             containerElement.querySelectorAll(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector).forEach((child) => {
                 if (child.matches && child.matches(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector)) {
@@ -122,151 +111,130 @@ export class UmbSorterController {
                 subtree: false,
             });
         };
+        this._itemDraggedOver = (e) => {
+            //if(UmbSorterController.activeSorter === this) return;
+            const dropSorter = _a.dropSorter;
+            if (!dropSorter || dropSorter.identifier !== this.identifier)
+                return;
+            if (dropSorter === this) {
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = 'move';
+                }
+                // Do nothing as we are the active sorter.
+                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_handleDragMove).call(this, e);
+                // Maybe we need to stop the event in this case.
+                // Do not bubble up to parent sorters:
+                e.stopPropagation();
+                return;
+            }
+            else {
+                // TODO: Check if dropping here is okay..
+                // If so lets set the approaching sorter:
+                _a.dropSorter = this;
+                // Do not bubble up to parent sorters:
+                e.stopPropagation();
+            }
+        };
         _UmbSorterController_handleDragStart.set(this, (event) => {
             const element = event.target.closest(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector);
             if (!element)
                 return;
-            if (__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f") && __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f") !== element) {
+            if (_a.activeElement && _a.activeElement !== element) {
+                // TODO: Remove this console log at one point.
+                console.log("drag start realized that something was already active, so we'll end it. -------!!!!#€#%#€");
                 __classPrivateFieldGet(this, _UmbSorterController_handleDragEnd, "f").call(this);
             }
             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.
+                event.dataTransfer.effectAllowed = 'all'; // copyMove when we enhance the drag with clipboard data.// defaults to 'all'
             }
             if (!__classPrivateFieldGet(this, _UmbSorterController_scrollElement, "f")) {
                 __classPrivateFieldSet(this, _UmbSorterController_scrollElement, getParentScrollElement(__classPrivateFieldGet(this, _UmbSorterController_containerElement, "f"), true), "f");
             }
             __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_setCurrentElement).call(this, element);
-            __classPrivateFieldSet(this, _UmbSorterController_currentDragRect, __classPrivateFieldGet(this, _UmbSorterController_currentDragElement, "f")?.getBoundingClientRect(), "f");
-            __classPrivateFieldSet(this, _UmbSorterController_currentItem, this.getItemOfElement(__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")), "f");
-            if (!__classPrivateFieldGet(this, _UmbSorterController_currentItem, "f")) {
+            _a.activeItem = this.getItemOfElement(_a.activeElement);
+            _a.originalSorter = this;
+            _a.originalIndex = __classPrivateFieldGet(this, _UmbSorterController_model, "f").indexOf(_a.activeItem);
+            if (!_a.activeItem) {
                 console.error('Could not find item related to this element.');
                 return;
             }
             // Get the current index of the item:
-            __classPrivateFieldSet(this, _UmbSorterController_currentIndex, __classPrivateFieldGet(this, _UmbSorterController_model, "f").indexOf(__classPrivateFieldGet(this, _UmbSorterController_currentItem, "f")), "f");
-            __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f").style.transform = 'translateZ(0)'; // Solves problem with FireFox and ShadowDom in the drag-image.
+            _a.activeIndex = __classPrivateFieldGet(this, _UmbSorterController_model, "f").indexOf(_a.activeItem);
+            _a.activeElement.style.transform = 'translateZ(0)'; // Solves problem with FireFox and ShadowDom in the drag-image.
             if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").dataTransferResolver) {
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").dataTransferResolver(event.dataTransfer, __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f"));
+                __classPrivateFieldGet(this, _UmbSorterController_config, "f").dataTransferResolver(event.dataTransfer, _a.activeItem);
             }
             if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onStart) {
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onStart({ item: __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f"), element: __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f") });
+                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onStart({
+                    item: _a.activeItem,
+                    element: _a.activeElement,
+                });
             }
-            window.addEventListener('dragover', __classPrivateFieldGet(this, _UmbSorterController_handleDragMove, "f"));
-            window.addEventListener('dragend', __classPrivateFieldGet(this, _UmbSorterController_handleDragEnd, "f"));
+            // Assuming we can only drag one thing at the time.
+            _a.activeSorter = this;
+            _a.dropSorter = this;
             // We must wait one frame before changing the look of the block.
             __classPrivateFieldSet(this, _UmbSorterController_rqaId, requestAnimationFrame(() => {
                 // It should be okay to use the same rqaId, as the move does not, or is okay not, to happen on first frame/drag-move.
                 __classPrivateFieldSet(this, _UmbSorterController_rqaId, undefined, "f");
-                if (__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")) {
-                    __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f").style.transform = '';
-                    __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_setupPlaceholderStyle).call(this);
+                if (_a.activeElement) {
+                    _a.activeElement.style.transform = '';
                 }
             }), "f");
+            return true;
         });
-        _UmbSorterController_handleDragEnd.set(this, async () => {
-            window.removeEventListener('dragover', __classPrivateFieldGet(this, _UmbSorterController_handleDragMove, "f"));
-            window.removeEventListener('dragend', __classPrivateFieldGet(this, _UmbSorterController_handleDragEnd, "f"));
-            if (!__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f") || !__classPrivateFieldGet(this, _UmbSorterController_currentItem, "f")) {
+        _UmbSorterController_handleDragEnd.set(this, async (event) => {
+            // If not good drop, revert model?
+            if (!_a.activeElement || !_a.activeItem) {
                 return;
             }
-            __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f").style.transform = '';
+            if (_a.originalSorter && event?.dataTransfer != null && event.dataTransfer.dropEffect === 'none') {
+                // Revert move, to start position.
+                _a.originalSorter.moveItemInModel(_a.originalIndex ?? 0, _a.activeSorter);
+            }
+            _a.activeElement.style.transform = '';
             __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_removePlaceholderStyle).call(this);
             __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_stopAutoScroll).call(this);
             this.removeAllowIndication();
             if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onEnd) {
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onEnd({ item: __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f"), element: __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f") });
+                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onEnd({
+                    item: _a.activeItem,
+                    element: _a.activeElement,
+                });
             }
             if (__classPrivateFieldGet(this, _UmbSorterController_rqaId, "f")) {
                 cancelAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_rqaId, "f"));
                 __classPrivateFieldSet(this, _UmbSorterController_rqaId, undefined, "f");
             }
-            __classPrivateFieldSet(this, _UmbSorterController_currentContainerElement, __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f"), "f");
-            __classPrivateFieldSet(this, _UmbSorterController_currentContainerCtrl, this, "f");
-            __classPrivateFieldSet(this, _UmbSorterController_currentItem, undefined, "f");
-            __classPrivateFieldSet(this, _UmbSorterController_currentElement, undefined, "f");
-            __classPrivateFieldSet(this, _UmbSorterController_currentDragElement, undefined, "f");
-            __classPrivateFieldSet(this, _UmbSorterController_currentDragRect, undefined, "f");
+            _a.activeItem = undefined;
+            _a.activeElement = undefined;
+            _a.activeDragElement = undefined;
+            _a.activeSorter = undefined;
+            _a.dropSorter = undefined;
+            _a.originalIndex = undefined;
+            _a.originalSorter = undefined;
             __classPrivateFieldSet(this, _UmbSorterController_dragX, 0, "f");
             __classPrivateFieldSet(this, _UmbSorterController_dragY, 0, "f");
         });
-        _UmbSorterController_handleDragMove.set(this, (event) => {
-            if (!__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")) {
-                return;
-            }
-            const clientX = event.touches
-                ? event.touches[0].clientX
-                : event.clientX;
-            const clientY = event.touches
-                ? event.touches[0].clientY
-                : event.clientY;
-            if (clientX !== 0 && clientY !== 0) {
-                if (__classPrivateFieldGet(this, _UmbSorterController_dragX, "f") === clientX && __classPrivateFieldGet(this, _UmbSorterController_dragY, "f") === clientY) {
-                    return;
-                }
-                __classPrivateFieldSet(this, _UmbSorterController_dragX, clientX, "f");
-                __classPrivateFieldSet(this, _UmbSorterController_dragY, clientY, "f");
-                this.handleAutoScroll(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"));
-                __classPrivateFieldSet(this, _UmbSorterController_currentDragRect, __classPrivateFieldGet(this, _UmbSorterController_currentDragElement, "f").getBoundingClientRect(), "f");
-                const insideCurrentRect = isWithinRect(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"), __classPrivateFieldGet(this, _UmbSorterController_currentDragRect, "f"));
-                if (!insideCurrentRect) {
-                    if (__classPrivateFieldGet(this, _UmbSorterController_rqaId, "f") === undefined) {
-                        __classPrivateFieldSet(this, _UmbSorterController_rqaId, requestAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_updateDragMove, "f")), "f");
-                    }
-                }
-            }
-        });
         _UmbSorterController_updateDragMove.set(this, () => {
             __classPrivateFieldSet(this, _UmbSorterController_rqaId, undefined, "f");
-            if (!__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f") || !__classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f") || !__classPrivateFieldGet(this, _UmbSorterController_currentItem, "f")) {
+            if (!_a.activeElement || !_a.activeItem) {
                 return;
             }
-            const currentElementRect = __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f").getBoundingClientRect();
+            // Maybe no need to check this twice, like we do it before the RAF an inside it, I think its fine to choose one of them.
+            const currentElementRect = _a.activeElement.getBoundingClientRect();
             const insideCurrentRect = isWithinRect(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"), currentElementRect);
             if (insideCurrentRect) {
                 return;
             }
-            let toBeCurrentContainerCtrl = undefined;
-            // If we have a boundarySelector, try it. If we didn't get anything fall back to currentContainerElement:
-            const currentBoundaryElement = (__classPrivateFieldGet(this, _UmbSorterController_config, "f").boundarySelector
-                ? __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f").closest(__classPrivateFieldGet(this, _UmbSorterController_config, "f").boundarySelector)
-                : __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f")) ?? __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f");
-            const currentBoundaryRect = currentBoundaryElement.getBoundingClientRect();
-            const currentContainerHasItems = __classPrivateFieldGet(this, _UmbSorterController_currentContainerCtrl, "f").hasOtherItemsThan(__classPrivateFieldGet(this, _UmbSorterController_currentItem, "f"));
-            // if empty we will be move likely to accept an item (add 20px to the bounding box)
-            // If we have items we must be 10px within the container to accept the move.
-            const offsetEdge = currentContainerHasItems ? -10 : 20;
-            if (!isWithinRect(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"), currentBoundaryRect, offsetEdge)) {
-                // we are outside the current container boundary, so lets see if there is a parent we can move to.
-                const parentNode = __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f").parentNode;
-                if (parentNode && __classPrivateFieldGet(this, _UmbSorterController_config, "f").containerSelector) {
-                    // TODO: support multiple parent shadowDOMs?
-                    const parentContainer = parentNode.host
-                        ? parentNode.host.closest(__classPrivateFieldGet(this, _UmbSorterController_config, "f").containerSelector)
-                        : parentNode.closest(__classPrivateFieldGet(this, _UmbSorterController_config, "f").containerSelector);
-                    if (parentContainer) {
-                        const parentContainerCtrl = parentContainer['__umbBlockGridSorterController']();
-                        if (parentContainerCtrl.unique === this.controllerAlias) {
-                            __classPrivateFieldSet(this, _UmbSorterController_currentContainerElement, parentContainer, "f");
-                            toBeCurrentContainerCtrl = parentContainerCtrl;
-                            if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onContainerChange) {
-                                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onContainerChange({
-                                    item: __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f"),
-                                    element: __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f"),
-                                    //ownerVM: this.#currentContainerVM.ownerVM,
-                                });
-                            }
-                        }
-                    }
-                }
-            }
             const containerElement = __classPrivateFieldGet(this, _UmbSorterController_useContainerShadowRoot, "f")
-                ? __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f").shadowRoot ?? __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f")
-                : __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f");
+                ? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").shadowRoot ?? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")
+                : __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f");
             // We want to retrieve the children of the container, every time to ensure we got the right order and index
             const orderedContainerElements = Array.from(containerElement.querySelectorAll(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector));
-            const currentContainerRect = __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f").getBoundingClientRect();
+            const currentContainerRect = __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").getBoundingClientRect();
             // gather elements on the same row.
             const elementsInSameRow = [];
             let placeholderIsInThisRow = false;
@@ -277,7 +245,7 @@ export class UmbSorterController {
                     const dragElement = __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector ? el.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector) : el;
                     if (dragElement) {
                         const dragElementRect = dragElement.getBoundingClientRect();
-                        if (el !== __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")) {
+                        if (el !== _a.activeElement) {
                             elementsInSameRow.push({ el: el, dragRect: dragElementRect });
                         }
                         else {
@@ -302,54 +270,19 @@ export class UmbSorterController {
             });
             if (foundEl) {
                 // If we are on top or closest to our self, we should not do anything.
-                if (foundEl === __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")) {
+                if (foundEl === _a.activeElement) {
                     return;
                 }
-                const isInsideFound = isWithinRect(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"), foundElDragRect, 0);
-                // If we are inside the found element, lets look for sub containers.
-                // use the itemHasNestedContainersResolver, if not configured fallback to looking for the existence of a container via DOM.
-                // TODO: Ability to look into shadowDOMs for sub containers?
-                if (isInsideFound && __classPrivateFieldGet(this, _UmbSorterController_config, "f").itemHasNestedContainersResolver
-                    ? __classPrivateFieldGet(this, _UmbSorterController_config, "f").itemHasNestedContainersResolver(foundEl)
-                    : foundEl.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").containerSelector)) {
-                    // Find all sub containers:
-                    const subLayouts = foundEl.querySelectorAll(__classPrivateFieldGet(this, _UmbSorterController_config, "f").containerSelector);
-                    for (const subLayoutEl of subLayouts) {
-                        // Use boundary element or fallback to container element.
-                        const subBoundaryElement = (__classPrivateFieldGet(this, _UmbSorterController_config, "f").boundarySelector ? subLayoutEl.closest(__classPrivateFieldGet(this, _UmbSorterController_config, "f").boundarySelector) : subLayoutEl) ||
-                            subLayoutEl;
-                        const subBoundaryRect = subBoundaryElement.getBoundingClientRect();
-                        const subContainerHasItems = subLayoutEl.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector + ':not(.' + __classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass + ')');
-                        // gather elements on the same row.
-                        const subOffsetEdge = subContainerHasItems ? -10 : 20;
-                        if (isWithinRect(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"), subBoundaryRect, subOffsetEdge)) {
-                            const subCtrl = subLayoutEl['__umbBlockGridSorterController']();
-                            if (subCtrl.unique === this.controllerAlias) {
-                                __classPrivateFieldSet(this, _UmbSorterController_currentContainerElement, subLayoutEl, "f");
-                                toBeCurrentContainerCtrl = subCtrl;
-                                if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onContainerChange) {
-                                    __classPrivateFieldGet(this, _UmbSorterController_config, "f").onContainerChange({
-                                        item: __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f"),
-                                        element: __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f"),
-                                        //ownerVM: this.#currentContainerVM.ownerVM,
-                                    });
-                                }
-                                __classPrivateFieldGet(this, _UmbSorterController_updateDragMove, "f").call(this);
-                                return;
-                            }
-                        }
-                    }
-                }
                 // Indication if drop is good:
-                if (this.updateAllowIndication(toBeCurrentContainerCtrl ?? __classPrivateFieldGet(this, _UmbSorterController_currentContainerCtrl, "f"), __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f")) === false) {
+                if (this.updateAllowIndication(_a.activeItem) === false) {
                     return;
                 }
                 const verticalDirection = __classPrivateFieldGet(this, _UmbSorterController_config, "f").resolveVerticalDirection
                     ? __classPrivateFieldGet(this, _UmbSorterController_config, "f").resolveVerticalDirection({
-                        containerElement: __classPrivateFieldGet(this, _UmbSorterController_currentContainerElement, "f"),
+                        containerElement: __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f"),
                         containerRect: currentContainerRect,
-                        item: __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f"),
-                        element: __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f"),
+                        item: _a.activeItem,
+                        element: _a.activeElement,
                         elementRect: currentElementRect,
                         relatedElement: foundEl,
                         relatedRect: foundElDragRect,
@@ -386,19 +319,23 @@ export class UmbSorterController {
                 }
                 const foundElIndex = orderedContainerElements.indexOf(foundEl);
                 const newIndex = placeAfter ? foundElIndex + 1 : foundElIndex;
-                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, toBeCurrentContainerCtrl, newIndex);
+                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, newIndex);
                 return;
             }
-            // We skipped the above part cause we are above or below container:
+            // We skipped the above part cause we are above or below container, or within an empty container:
             // Indication if drop is good:
-            if (this.updateAllowIndication(toBeCurrentContainerCtrl ?? __classPrivateFieldGet(this, _UmbSorterController_currentContainerCtrl, "f"), __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f")) === false) {
+            if (this.updateAllowIndication(_a.activeItem) === false) {
                 return;
             }
-            if (__classPrivateFieldGet(this, _UmbSorterController_dragY, "f") < currentContainerRect.top) {
-                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, toBeCurrentContainerCtrl, 0);
+            if (__classPrivateFieldGet(this, _UmbSorterController_model, "f").length === 0) {
+                // Here is no items, so we should just move into the top of the container.
+                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, 0);
+            }
+            else if (__classPrivateFieldGet(this, _UmbSorterController_dragY, "f") < currentContainerRect.top) {
+                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, 0);
             }
             else if (__classPrivateFieldGet(this, _UmbSorterController_dragY, "f") > currentContainerRect.bottom) {
-                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, toBeCurrentContainerCtrl, -1);
+                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, -1);
             }
         });
         // TODO: Move auto scroll into its own class?
@@ -413,6 +350,7 @@ export class UmbSorterController {
         });
         __classPrivateFieldSet(this, _UmbSorterController_host, host, "f");
         // Set defaults:
+        config.identifier ?? (config.identifier = Symbol());
         config.ignorerSelector ?? (config.ignorerSelector = 'a, img, iframe');
         if (!config.placeholderClass && !config.placeholderAttr) {
             config.placeholderAttr = 'drag-placeholder';
@@ -440,15 +378,24 @@ export class UmbSorterController {
         }
         __classPrivateFieldSet(this, _UmbSorterController_model, model, "f");
     }
+    hasItem(unique) {
+        return __classPrivateFieldGet(this, _UmbSorterController_model, "f").find((x) => __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfModel(x) === unique) !== undefined;
+    }
+    getItem(unique) {
+        return __classPrivateFieldGet(this, _UmbSorterController_model, "f").find((x) => __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfModel(x) === unique);
+    }
     hostConnected() {
         requestAnimationFrame(this._onFirstRender);
     }
     hostDisconnected() {
-        // TODO: Clean up??
+        // TODO: Is there more clean up to do??
         __classPrivateFieldGet(this, _UmbSorterController_observer, "f").disconnect();
         if (__classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")) {
-            __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")['__umbBlockGridSorterController'] = undefined;
-            __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").removeEventListener('dragover', preventDragOver);
+            // Only look at the shadowRoot if the containerElement is host.
+            const containerElement = __classPrivateFieldGet(this, _UmbSorterController_useContainerShadowRoot, "f")
+                ? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").shadowRoot ?? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")
+                : __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f");
+            containerElement.removeEventListener('dragover', this._itemDraggedOver);
             __classPrivateFieldSet(this, _UmbSorterController_containerElement, undefined, "f");
         }
     }
@@ -459,11 +406,12 @@ export class UmbSorterController {
         if (!__classPrivateFieldGet(this, _UmbSorterController_config, "f").disabledItemSelector || !element.matches(__classPrivateFieldGet(this, _UmbSorterController_config, "f").disabledItemSelector)) {
             element.draggable = true;
             element.addEventListener('dragstart', __classPrivateFieldGet(this, _UmbSorterController_handleDragStart, "f"));
+            element.addEventListener('dragend', __classPrivateFieldGet(this, _UmbSorterController_handleDragEnd, "f"));
         }
         // If we have a currentItem and the element matches, we should set the currentElement to this element.
-        if (__classPrivateFieldGet(this, _UmbSorterController_currentItem, "f") && __classPrivateFieldGet(this, _UmbSorterController_config, "f").compareElementToModel(element, __classPrivateFieldGet(this, _UmbSorterController_currentItem, "f"))) {
-            if (__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f") !== element) {
-                console.log('THIS ACTUALLY HAPPENED... NOTICE THIS!');
+        if (_a.activeItem &&
+            __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfElement(element) === __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfModel(_a.activeItem)) {
+            if (_a.activeElement !== element) {
                 __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_setCurrentElement).call(this, element);
             }
         }
@@ -473,13 +421,20 @@ export class UmbSorterController {
             destroyIgnorerElements(element, __classPrivateFieldGet(this, _UmbSorterController_config, "f").ignorerSelector);
         }
         element.removeEventListener('dragstart', __classPrivateFieldGet(this, _UmbSorterController_handleDragStart, "f"));
+        // We are not ready to remove the dragend or drop, as this is might be the active one just moving container:
+        //element.removeEventListener('dragend', this.#handleDragEnd);
+        //element.addEventListener('drop', this.#handleDrop);
     }
     /** Management methods: */
     getItemOfElement(element) {
         if (!element) {
-            return undefined;
+            throw new Error('Element was not defined');
         }
-        return __classPrivateFieldGet(this, _UmbSorterController_model, "f").find((entry) => __classPrivateFieldGet(this, _UmbSorterController_config, "f").compareElementToModel(element, entry));
+        const elementUnique = __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfElement(element);
+        if (!elementUnique) {
+            throw new Error('Could not find unique of element');
+        }
+        return __classPrivateFieldGet(this, _UmbSorterController_model, "f").find((entry) => elementUnique === __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfModel(entry));
     }
     async removeItem(item) {
         if (!item) {
@@ -500,11 +455,32 @@ export class UmbSorterController {
         }
         return false;
     }
+    /*
+    public async insertItem(item: T, newIndex: number = 0) {
+        if (!item) {
+            return false;
+        }
+
+        if (this.#config.performItemInsert) {
+            const result = await this.#config.performItemInsert({ item, newIndex });
+            if (result === false) {
+                return false;
+            }
+        } else {
+            const newModel = [...this.#model];
+            newModel.splice(newIndex, 0, item);
+            this.#model = newModel;
+            this.#config.onChange?.({ model: newModel, item });
+        }
+        return false;
+    }
+    */
     hasOtherItemsThan(item) {
         return __classPrivateFieldGet(this, _UmbSorterController_model, "f").filter((x) => x !== item).length > 0;
     }
-    async moveItemInModel(newIndex, element, fromCtrl) {
-        const item = fromCtrl.getItemOfElement(element);
+    // TODO: Could get item via attr.
+    async moveItemInModel(newIndex, fromCtrl) {
+        const item = _a.activeItem;
         if (!item) {
             console.error('Could not find item of sync item');
             return false;
@@ -517,6 +493,10 @@ export class UmbSorterController {
             // Local move:
             // TODO: Maybe this should be replaceable/configurable:
             const oldIndex = __classPrivateFieldGet(this, _UmbSorterController_model, "f").indexOf(item);
+            if (oldIndex === -1) {
+                console.error('Could not find item in model');
+                return false;
+            }
             if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").performItemMove) {
                 const result = await __classPrivateFieldGet(this, _UmbSorterController_config, "f").performItemMove({ item, newIndex, oldIndex });
                 if (result === false) {
@@ -533,6 +513,7 @@ export class UmbSorterController {
                 __classPrivateFieldSet(this, _UmbSorterController_model, newModel, "f");
                 __classPrivateFieldGet(this, _UmbSorterController_config, "f").onChange?.({ model: newModel, item });
             }
+            _a.activeIndex = newIndex;
         }
         else {
             // Not a local move:
@@ -552,21 +533,30 @@ export class UmbSorterController {
                 __classPrivateFieldSet(this, _UmbSorterController_model, newModel, "f");
                 __classPrivateFieldGet(this, _UmbSorterController_config, "f").onChange?.({ model: newModel, item });
             }
+            // If everything went well, we can set new activeSorter to this:
+            _a.activeSorter = this;
+            _a.activeIndex = newIndex;
         }
         return true;
     }
-    updateAllowIndication(controller, item) {
+    updateAllowIndication(item) {
+        // TODO: Allow indication.
+        /*
         // Remove old indication:
-        if (__classPrivateFieldGet(this, _UmbSorterController_lastIndicationContainerCtrl, "f") !== null && __classPrivateFieldGet(this, _UmbSorterController_lastIndicationContainerCtrl, "f") !== controller) {
-            __classPrivateFieldGet(this, _UmbSorterController_lastIndicationContainerCtrl, "f").notifyAllowed();
+        if (this.#lastIndicationContainerCtrl !== null && this.#lastIndicationContainerCtrl !== controller) {
+            this.#lastIndicationContainerCtrl.notifyAllowed();
         }
-        __classPrivateFieldSet(this, _UmbSorterController_lastIndicationContainerCtrl, controller, "f");
+        this.#lastIndicationContainerCtrl = controller;
+
         if (controller.notifyRequestDrop({ item: item }) === true) {
             controller.notifyAllowed();
             return true;
         }
+
         controller.notifyDisallowed(); // This block is not accepted to we will indicate that its not allowed.
         return false;
+        */
+        return true;
     }
     removeAllowIndication() {
         // Remove old indication:
@@ -633,7 +623,7 @@ export class UmbSorterController {
     }
     destroy() {
         // Do something when host element is destroyed.
-        if (__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")) {
+        if (_a.activeElement) {
             __classPrivateFieldGet(this, _UmbSorterController_handleDragEnd, "f").call(this);
         }
         __classPrivateFieldSet(this, _UmbSorterController_lastIndicationContainerCtrl, null, "f");
@@ -643,44 +633,71 @@ export class UmbSorterController {
         __classPrivateFieldSet(this, _UmbSorterController_scrollElement, null, "f");
     }
 }
-_UmbSorterController_host = new WeakMap(), _UmbSorterController_config = new WeakMap(), _UmbSorterController_observer = new WeakMap(), _UmbSorterController_model = new WeakMap(), _UmbSorterController_rqaId = new WeakMap(), _UmbSorterController_containerElement = new WeakMap(), _UmbSorterController_currentContainerCtrl = new WeakMap(), _UmbSorterController_currentContainerElement = new WeakMap(), _UmbSorterController_useContainerShadowRoot = new WeakMap(), _UmbSorterController_scrollElement = new WeakMap(), _UmbSorterController_currentElement = new WeakMap(), _UmbSorterController_currentDragElement = new WeakMap(), _UmbSorterController_currentDragRect = new WeakMap(), _UmbSorterController_currentItem = new WeakMap(), _UmbSorterController_currentIndex = new WeakMap(), _UmbSorterController_dragX = new WeakMap(), _UmbSorterController_dragY = new WeakMap(), _UmbSorterController_lastIndicationContainerCtrl = new WeakMap(), _UmbSorterController_handleDragStart = new WeakMap(), _UmbSorterController_handleDragEnd = new WeakMap(), _UmbSorterController_handleDragMove = new WeakMap(), _UmbSorterController_updateDragMove = new WeakMap(), _UmbSorterController_autoScrollRAF = new WeakMap(), _UmbSorterController_autoScrollEl = new WeakMap(), _UmbSorterController_performAutoScroll = new WeakMap(), _UmbSorterController_instances = new WeakSet(), _UmbSorterController_setupPlaceholderStyle = function _UmbSorterController_setupPlaceholderStyle() {
+_a = UmbSorterController, _UmbSorterController_host = new WeakMap(), _UmbSorterController_config = new WeakMap(), _UmbSorterController_observer = new WeakMap(), _UmbSorterController_model = new WeakMap(), _UmbSorterController_rqaId = new WeakMap(), _UmbSorterController_containerElement = new WeakMap(), _UmbSorterController_useContainerShadowRoot = new WeakMap(), _UmbSorterController_scrollElement = new WeakMap(), _UmbSorterController_dragX = new WeakMap(), _UmbSorterController_dragY = new WeakMap(), _UmbSorterController_lastIndicationContainerCtrl = new WeakMap(), _UmbSorterController_handleDragStart = new WeakMap(), _UmbSorterController_handleDragEnd = new WeakMap(), _UmbSorterController_updateDragMove = new WeakMap(), _UmbSorterController_autoScrollRAF = new WeakMap(), _UmbSorterController_autoScrollEl = new WeakMap(), _UmbSorterController_performAutoScroll = new WeakMap(), _UmbSorterController_instances = new WeakSet(), _UmbSorterController_setupPlaceholderStyle = function _UmbSorterController_setupPlaceholderStyle() {
     if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass) {
-        __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")?.classList.add(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass);
+        _a.activeElement?.classList.add(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass);
     }
     if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr) {
-        __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")?.setAttribute(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr, '');
+        _a.activeElement?.setAttribute(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr, '');
     }
 }, _UmbSorterController_removePlaceholderStyle = function _UmbSorterController_removePlaceholderStyle() {
     if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass) {
-        __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")?.classList.remove(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass);
+        _a.activeElement?.classList.remove(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass);
     }
     if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr) {
-        __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")?.removeAttribute(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr);
+        _a.activeElement?.removeAttribute(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr);
     }
 }, _UmbSorterController_setCurrentElement = function _UmbSorterController_setCurrentElement(element) {
-    __classPrivateFieldSet(this, _UmbSorterController_currentElement, element, "f");
-    __classPrivateFieldSet(this, _UmbSorterController_currentDragElement, __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector
+    _a.activeElement = element;
+    _a.activeDragElement = __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector
         ? element.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector) ?? undefined
-        : element, "f");
-    if (!__classPrivateFieldGet(this, _UmbSorterController_currentDragElement, "f")) {
+        : element;
+    if (!_a.activeDragElement) {
         throw new Error('Could not find drag element, query was made with the `draggableSelector` of "' +
             __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector +
             '"');
         return;
     }
     __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_setupPlaceholderStyle).call(this);
-}, _UmbSorterController_moveElementTo = async function _UmbSorterController_moveElementTo(containerCtrl, newIndex) {
-    if (!__classPrivateFieldGet(this, _UmbSorterController_currentElement, "f")) {
+}, _UmbSorterController_handleDragMove = function _UmbSorterController_handleDragMove(event) {
+    if (!_a.activeElement) {
         return;
     }
-    containerCtrl ?? (containerCtrl = this);
-    // If same container and same index, do nothing:
-    if (__classPrivateFieldGet(this, _UmbSorterController_currentContainerCtrl, "f") === containerCtrl && __classPrivateFieldGet(this, _UmbSorterController_currentIndex, "f") === newIndex)
+    const clientX = event.touches
+        ? event.touches[0].clientX
+        : event.clientX;
+    const clientY = event.touches
+        ? event.touches[0].clientY
+        : event.clientY;
+    if (clientX !== 0 && clientY !== 0) {
+        if (__classPrivateFieldGet(this, _UmbSorterController_dragX, "f") === clientX && __classPrivateFieldGet(this, _UmbSorterController_dragY, "f") === clientY) {
+            return;
+        }
+        __classPrivateFieldSet(this, _UmbSorterController_dragX, clientX, "f");
+        __classPrivateFieldSet(this, _UmbSorterController_dragY, clientY, "f");
+        this.handleAutoScroll(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"));
+        const activeDragRect = _a.activeDragElement.getBoundingClientRect();
+        const insideCurrentRect = isWithinRect(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"), activeDragRect);
+        if (!insideCurrentRect) {
+            if (__classPrivateFieldGet(this, _UmbSorterController_rqaId, "f") === undefined) {
+                __classPrivateFieldSet(this, _UmbSorterController_rqaId, requestAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_updateDragMove, "f")), "f");
+            }
+        }
+    }
+}, _UmbSorterController_moveElementTo = 
+//
+async function _UmbSorterController_moveElementTo(newIndex) {
+    if (!_a.activeElement || !_a.activeSorter) {
         return;
-    if (await containerCtrl.moveItemInModel(newIndex, __classPrivateFieldGet(this, _UmbSorterController_currentElement, "f"), __classPrivateFieldGet(this, _UmbSorterController_currentContainerCtrl, "f"))) {
-        __classPrivateFieldSet(this, _UmbSorterController_currentContainerCtrl, containerCtrl, "f");
-        __classPrivateFieldSet(this, _UmbSorterController_currentIndex, newIndex, "f");
     }
+    const requestingSorter = _a.dropSorter;
+    if (!requestingSorter) {
+        throw new Error('Could not find requestingSorter');
+    }
+    // If same container and same index, do nothing:
+    if (requestingSorter === _a.activeSorter && _a.activeIndex === newIndex)
+        return;
+    await requestingSorter.moveItemInModel(newIndex, _a.activeSorter);
 }, _UmbSorterController_stopAutoScroll = function _UmbSorterController_stopAutoScroll() {
     cancelAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_autoScrollRAF, "f"));
     __classPrivateFieldSet(this, _UmbSorterController_autoScrollRAF, null, "f");