@vuu-ui/grid-layout 4.0.0-alpha.1

package/src/drag-drop-next/tabstrip-drag-drop.js

@@ -0,0 +1,251 @@
+import { queryClosest } from "@vuu-ui/vuu-utils";
+import { SpaceMan } from "./SpaceMan.js";
+import { sourceIsTabbedComponent } from "../GridLayoutContext.js";
+import { getClosestGridLayout } from "../grid-dom-utils.js";
+const isDraggable = (target)=>{
+    const el = target;
+    return null !== el && null !== queryClosest(el, '[draggable="true"]');
+};
+const getDraggableEl = (target)=>{
+    const el = target;
+    if (!isDraggable(target)) return null;
+    if (el?.classList.contains("vuuDraggableItem")) return el;
+    return queryClosest(el, ".vuuDraggableItem");
+};
+const isRemoteContainer = (sourceElement, targetElement)=>sourceElement.parentElement !== targetElement?.parentElement;
+const getDataIndex = (el)=>el ? parseInt(el.dataset.index ?? "-1") : -1;
+const getDataLabel = (el)=>el?.dataset.label ?? "";
+const TAB_CLICK_MOVEMENT_TOLERANCE = 12;
+const getDropPosition = (target, clientX, clientY, orientation)=>{
+    const itemId = target?.dataset.gridLayoutItemId;
+    if (!target || !itemId) return;
+    const rect = target.getBoundingClientRect();
+    const after = "horizontal" === orientation ? clientX >= rect.left + rect.width / 2 : clientY >= rect.top + rect.height / 2;
+    return {
+        position: after ? "after" : "before",
+        target: itemId
+    };
+};
+const eventTargetsGrid = (event, gridId)=>{
+    const target = event.target;
+    return target instanceof Element && target.closest(".vuuGridLayout")?.id === gridId;
+};
+const getDropPositionAtEnd = (target, containerEl)=>{
+    if (target.closest(".vuuDragContainer") !== containerEl) return;
+    const tabs = containerEl.querySelectorAll(".vuuDraggableItem[data-label]");
+    const lastTab = tabs.item(tabs.length - 1);
+    return lastTab ? {
+        position: "after",
+        target: lastTab.dataset.gridLayoutItemId ?? getDataLabel(lastTab)
+    } : void 0;
+};
+const getDropPositionAtPoint = (containerEl, clientX, clientY, orientation)=>{
+    const tabs = [
+        ...containerEl.querySelectorAll(".vuuDraggableItem[data-grid-layout-item-id]")
+    ];
+    const target = tabs.reduce((closest, tab)=>{
+        if (!closest) return tab;
+        const coordinate = "horizontal" === orientation ? clientX : clientY;
+        const rect = tab.getBoundingClientRect();
+        const closestRect = closest.getBoundingClientRect();
+        const midpoint = "horizontal" === orientation ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+        const closestMidpoint = "horizontal" === orientation ? closestRect.left + closestRect.width / 2 : closestRect.top + closestRect.height / 2;
+        return Math.abs(coordinate - midpoint) < Math.abs(coordinate - closestMidpoint) ? tab : closest;
+    }, void 0);
+    return getDropPosition(target ?? null, clientX, clientY, orientation);
+};
+function initializeDragContainer(containerEl, dragContext, orientation = "horizontal", tabsId = containerEl.id) {
+    const gridId = getClosestGridLayout(containerEl);
+    const spaceMan = new SpaceMan(dragContext, containerEl.id, orientation);
+    spaceMan.setDragContainer(containerEl);
+    let mouseDown;
+    let tabDropTarget;
+    const clearTabDropTarget = ()=>{
+        tabDropTarget?.classList.remove("vuuTabDropTarget-after", "vuuTabDropTarget-before");
+        tabDropTarget = void 0;
+    };
+    const clearTabDropTargetAfterFrame = ()=>{
+        const target = tabDropTarget;
+        tabDropTarget = void 0;
+        requestAnimationFrame(()=>{
+            target?.classList.remove("vuuTabDropTarget-after", "vuuTabDropTarget-before");
+        });
+    };
+    const unregisterDragStateCleanup = dragContext.registerDragStateCleanup(()=>{
+        clearTabDropTargetAfterFrame();
+        spaceMan.cleanup();
+    });
+    const focusDroppedTab = (tabsId, itemId, tabLabel)=>{
+        requestAnimationFrame(()=>{
+            const selector = itemId ? `[data-grid-layout-item-id="${CSS.escape(itemId)}"] .saltTabNextTrigger` : `[data-label="${CSS.escape(tabLabel)}"] .saltTabNextTrigger`;
+            const droppedTab = document.getElementById(tabsId)?.querySelector(selector);
+            droppedTab?.focus();
+        });
+    };
+    const onDragStart = (e)=>{
+        const element = getDraggableEl(e.target);
+        if (element) {
+            const tabsContainer = queryClosest(e.target, ".vuuDragContainer", true);
+            const gridLayout = queryClosest(tabsContainer, ".vuuGridLayout", true);
+            const gridLayoutItem = queryClosest(tabsContainer, ".vuuGridLayoutItem", true);
+            const tabIndex = getDataIndex(element);
+            const label = getDataLabel(element);
+            const isSelectedTab = null !== element.querySelector('[aria-selected="true"]');
+            const { gridLayoutItemId } = element.dataset;
+            e.stopPropagation();
+            dragContext.beginDrag(e, {
+                element,
+                label,
+                isSelectedTab,
+                layoutId: gridLayout.id,
+                tab: {
+                    id: gridLayoutItemId ?? "",
+                    label
+                },
+                tabIndex,
+                tabsId: gridLayoutItem.id,
+                type: "tabbed-component"
+            });
+            dragContext.detachTab(gridId, gridLayoutItem.id, gridLayoutItemId ?? "", label);
+            spaceMan.dragStart(tabIndex);
+        }
+    };
+    const onDragEnter = (e)=>{
+        const dropTarget = getDraggableEl(e.target);
+        e.preventDefault();
+        const { dragSource, x, y } = dragContext;
+        if (dropTarget) {
+            const indexOfDropTarget = getDataIndex(dropTarget);
+            if (sourceIsTabbedComponent(dragSource)) {
+                if (-1 !== indexOfDropTarget && (indexOfDropTarget !== dragSource?.tabIndex || isRemoteContainer(dragSource.element, dropTarget))) {
+                    const position = getDropPosition(dropTarget, e.clientX, e.clientY, orientation);
+                    clearTabDropTarget();
+                    if (position) {
+                        tabDropTarget = dropTarget;
+                        dropTarget.classList.add(`vuuTabDropTarget-${position.position}`);
+                    }
+                    const direction = position?.position === "after" ? "fwd" : "bwd";
+                    spaceMan.dragEnter(indexOfDropTarget, direction);
+                }
+            } else {
+                const direction = "horizontal" === orientation ? e.clientX > x ? "fwd" : "bwd" : e.clientY > y ? "fwd" : "bwd";
+                spaceMan.dragEnter(indexOfDropTarget, direction);
+            }
+        } else if (dragSource && !sourceIsTabbedComponent(dragSource) && e.target.closest(".vuuDragContainer")) {
+            const tabs = containerEl.querySelectorAll(".vuuDraggableItem[data-index]");
+            const lastTab = tabs.item(tabs.length - 1);
+            const lastIndex = getDataIndex(lastTab);
+            if (-1 !== lastIndex) spaceMan.dragEnter(lastIndex, "fwd");
+        }
+        dragContext.x = e.clientX;
+        dragContext.y = e.clientY;
+    };
+    const onDragOver = (e)=>{
+        const dropTarget = getDraggableEl(e.target);
+        if (dropTarget && sourceIsTabbedComponent(dragContext.dragSource)) {
+            const position = getDropPosition(dropTarget, e.clientX, e.clientY, orientation);
+            clearTabDropTarget();
+            if (position) {
+                tabDropTarget = dropTarget;
+                dropTarget.classList.add(`vuuTabDropTarget-${position.position}`);
+            }
+        } else if (sourceIsTabbedComponent(dragContext.dragSource)) {
+            const position = getDropPositionAtPoint(containerEl, e.clientX, e.clientY, orientation);
+            const target = position ? containerEl.querySelector(`[data-grid-layout-item-id="${CSS.escape(position.target)}"]`) : void 0;
+            clearTabDropTarget();
+            if (position && target) {
+                tabDropTarget = target;
+                target.classList.add(`vuuTabDropTarget-${position.position}`);
+            }
+        }
+        e.preventDefault();
+    };
+    const onDragLeave = (e)=>{
+        const container = queryClosest(e.relatedTarget, `#${spaceMan.id}`);
+        if (null === container) {
+            clearTabDropTarget();
+            spaceMan.leaveDragContainer();
+        }
+    };
+    const onDrop = async (e)=>{
+        if (!eventTargetsGrid(e, gridId)) return;
+        if (dragContext.dropped) return void spaceMan.cleanup();
+        const { clientX, clientY } = e;
+        const dropPosition = getDropPosition(getDraggableEl(e.target), clientX, clientY, orientation) ?? getDropPositionAtPoint(containerEl, clientX, clientY, orientation) ?? spaceMan.dropPosition ?? getDropPositionAtEnd(e.target, containerEl);
+        if (dropPosition) {
+            e.preventDefault();
+            e.stopPropagation();
+            const source = dragContext.dragSource;
+            const droppedLabel = source?.label;
+            const droppedItemId = sourceIsTabbedComponent(source) ? source.tab.id : void 0;
+            if (sourceIsTabbedComponent(source)) {
+                dragContext.beginDrop();
+                await spaceMan.drop(clientX, clientY);
+                dragContext.drop({
+                    tabsId,
+                    dropPosition
+                });
+            } else {
+                spaceMan.cleanup();
+                dragContext.drop({
+                    tabsId,
+                    dropPosition
+                });
+            }
+            if (droppedLabel) focusDroppedTab(tabsId, droppedItemId, droppedLabel);
+            dragContext.endDrag();
+        } else spaceMan.cleanup();
+    };
+    const onDragEnd = ({ clientX, clientY })=>{
+        if (mouseDown && Math.hypot(clientX - mouseDown.x, clientY - mouseDown.y) <= TAB_CLICK_MOVEMENT_TOLERANCE && "true" !== mouseDown.tab.ariaSelected) mouseDown.tab.click();
+        mouseDown = void 0;
+        if (!dragContext.ownsDrag) return;
+        if (dragContext.dropped || dragContext.dropPending) {
+            if (dragContext.dropped) dragContext.endDrag();
+        } else dragContext.cancelDrag();
+    };
+    const onMouseDown = (event)=>{
+        const { clientX, clientY, target } = event;
+        const draggable = getDraggableEl(target);
+        if (draggable) {
+            const tab = draggable.querySelector('[role="tab"]');
+            if (tab) mouseDown = {
+                tab,
+                x: clientX,
+                y: clientY
+            };
+            const { left, top } = draggable.getBoundingClientRect();
+            spaceMan.mouseOffset = {
+                x: clientX - left,
+                y: clientY - top
+            };
+        }
+    };
+    const onMouseUp = ({ clientX, clientY })=>{
+        if (mouseDown && Math.hypot(clientX - mouseDown.x, clientY - mouseDown.y) <= TAB_CLICK_MOVEMENT_TOLERANCE && "true" !== mouseDown.tab.ariaSelected) mouseDown.tab.click();
+        mouseDown = void 0;
+    };
+    containerEl?.addEventListener("mousedown", onMouseDown, true);
+    document.body.addEventListener("mouseup", onMouseUp);
+    containerEl?.addEventListener("dragstart", onDragStart, true);
+    containerEl?.addEventListener("dragenter", onDragEnter, true);
+    containerEl?.addEventListener("dragleave", onDragLeave, true);
+    containerEl?.addEventListener("dragover", onDragOver, true);
+    containerEl?.addEventListener("drop", onDrop, true);
+    document.body.addEventListener("dragend", onDragEnd);
+    function cleanUp() {
+        unregisterDragStateCleanup();
+        clearTabDropTarget();
+        spaceMan.cleanup();
+        containerEl?.removeEventListener("mousedown", onMouseDown, true);
+        document.body.removeEventListener("mouseup", onMouseUp);
+        containerEl?.removeEventListener("dragstart", onDragStart, true);
+        containerEl?.removeEventListener("dragenter", onDragEnter, true);
+        containerEl?.removeEventListener("dragleave", onDragLeave, true);
+        containerEl?.removeEventListener("dragover", onDragOver, true);
+        containerEl?.removeEventListener("drop", onDrop, true);
+        document.body.removeEventListener("dragend", onDragEnd);
+    }
+    return cleanUp;
+}
+export { initializeDragContainer };

package/src/grid-dom-utils.js

@@ -0,0 +1,57 @@
+import { queryClosest } from "@vuu-ui/vuu-utils";
+const classNameLayoutItem = "vuuGridLayoutItem";
+const classNameGridSplitter = "vuuGridSplitter";
+const getGridSplitter = (el)=>{
+    if (el.classList.contains(classNameGridSplitter)) return el;
+    return el.closest(`.${classNameGridSplitter}`);
+};
+const getGridLayoutItem = (el)=>{
+    if (el.classList.contains(classNameLayoutItem)) return el;
+    return el.closest(`.${classNameLayoutItem}`);
+};
+const NO_POSITION = [
+    -1,
+    -1
+];
+const getColumn = (el)=>{
+    const value = getComputedStyle(el).getPropertyValue("grid-column").split("/").map((value)=>parseInt(value, 10));
+    if (2 === value.length) return value;
+    if (1 === value.length) return [
+        value[0],
+        value[0]
+    ];
+    return NO_POSITION;
+};
+const getRow = (el)=>{
+    if (void 0 === el) throw Error("getRow invoked with null element");
+    const value = getComputedStyle(el).getPropertyValue("grid-row").split("/").map((value)=>parseInt(value, 10));
+    if (2 === value.length) return value;
+    if (1 === value.length) return [
+        value[0],
+        value[0]
+    ];
+    return NO_POSITION;
+};
+const getRowIndex = (el)=>{
+    const [from] = getRow(el);
+    return from - 1;
+};
+const setGridColumn = (target, { start, end })=>{
+    const el = "string" == typeof target ? document.getElementById(target) : target;
+    el?.style.setProperty("grid-column", `${start}/${end}`);
+};
+const setGridRow = (target, { start, end })=>{
+    const el = "string" == typeof target ? document.getElementById(target) : target;
+    el?.style.setProperty("grid-row", `${start}/${end}`);
+};
+const spansMultipleTracks = (gridItem, direction)=>{
+    const track = "horizontal" === direction ? "column" : "row";
+    const { start, end } = gridItem[track];
+    return end - start > 1;
+};
+function getClosestGridLayout(source) {
+    const el = "string" == typeof source ? document.getElementById(source) : source;
+    const gridLayout = queryClosest(el, ".vuuGridLayout", true);
+    return gridLayout.id;
+}
+export { classNameGridSplitter, classNameLayoutItem, getClosestGridLayout, getColumn, getGridLayoutItem, getGridSplitter, getRow, getRowIndex, setGridColumn, setGridRow, spansMultipleTracks };

package/src/grid-layout-utils.js

@@ -0,0 +1,39 @@
+const adjustDistance = (moveBy, adjustmentAmount)=>{
+    if (moveBy < 0) return moveBy + adjustmentAmount;
+    return moveBy - adjustmentAmount;
+};
+const getGridArea = ({ column, row })=>`${row.start}/${column.start}/${row.end}/${column.end}`;
+const getActiveIndex = (childItems)=>{
+    const index = childItems.findIndex((item)=>item.contentVisible);
+    if (0 === childItems.length) return -1;
+    if (-1 === index) return 0;
+    return index;
+};
+const getSharedGridPosition = (childItems)=>{
+    const [{ column, row }, ...rest] = childItems;
+    if (rest.length > 0) {
+        if (rest.some(({ column: c, row: r })=>c.start !== column.start || c.end !== column.end || r.start !== row.start || r.end !== row.end)) throw Error("grid-layout-utils] getSharedGridPosition not all child grid items hae same GridLayoutModelCoordinates");
+    }
+    return {
+        column,
+        row
+    };
+};
+const getGridPosition = (gridArea)=>{
+    if ("string" == typeof gridArea) {
+        const [rowStart, colStart, rowEnd, colEnd] = gridArea.split("/").map((val)=>parseInt(val, 10));
+        return {
+            column: {
+                start: colStart,
+                end: colEnd
+            },
+            row: {
+                start: rowStart,
+                end: rowEnd
+            }
+        };
+    }
+    throw Error("[grid-layout-utils] getGridPosition gridArea  must be valid");
+};
+const getTrackType = (splitter)=>"vertical" === splitter.orientation ? "row" : "column";
+export { adjustDistance, getActiveIndex, getGridArea, getGridPosition, getSharedGridPosition, getTrackType };