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

package/src/useAsDropTarget.js

@@ -0,0 +1,229 @@
+import { boxContainsPoint, getPositionWithinBox, pointPositionWithinRect, queryClosest } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useRef } from "react";
+import { useGridLayoutDragLeaveHandler, useGridLayoutDragPreviewHandler, useGridLayoutDropHandler, useGridLayoutId } from "./GridLayoutContext.js";
+import { useDragContext } from "./drag-drop-next/DragDropProviderNext.js";
+const DROPTARGET_CLASSNAME = "vuuDropTarget";
+const GRIDITEM_QUERY = ".vuuGridLayoutItem";
+const DROPTARGET_QUERY = "[data-drop-target]";
+const removeDropTargetPositionClassName = (el)=>{
+    el.classList.forEach((className)=>{
+        if (className.match(/(north|east|south|west|centre|tabs|header)$/)) el.classList.remove(className);
+    });
+};
+const addDropTargetPositionClassName = (el, position)=>{
+    removeDropTargetPositionClassName(el);
+    el.classList.add(`${DROPTARGET_CLASSNAME}-${position}`);
+};
+const getDropTarget = (target, currentDropTarget, layoutId)=>{
+    let dropTargetEl = queryClosest(target, DROPTARGET_QUERY);
+    if (dropTargetEl) {
+        const owningLayout = queryClosest(dropTargetEl, ".vuuGridLayout", true);
+        if (owningLayout.id !== layoutId) return;
+        const { id: gridLayoutItemId } = queryClosest(dropTargetEl, GRIDITEM_QUERY, true);
+        if (dropTargetEl === currentDropTarget?.target) return currentDropTarget;
+        {
+            const { dropTarget: dropTargetValue } = dropTargetEl.dataset;
+            switch(dropTargetValue){
+                case "true":
+                    return {
+                        gridLayoutItemId,
+                        target: dropTargetEl,
+                        type: "content"
+                    };
+                case "header":
+                    return {
+                        gridLayoutItemId,
+                        target: dropTargetEl,
+                        type: "header"
+                    };
+                case void 0:
+                    throw Error("[useAsDropTarget] getDropTarget, called on element without data-drop-target attribute");
+                default:
+                    dropTargetEl = document.getElementById(dropTargetValue);
+                    if (dropTargetEl) return {
+                        gridLayoutItemId,
+                        target: dropTargetEl,
+                        type: "remote"
+                    };
+                    throw Error(`[useAsDropTarget] getDropTarget, data-drop-target ${dropTargetValue} not found`);
+            }
+        }
+    }
+};
+const NullRect = {
+    bottom: -1,
+    left: -1,
+    right: -1,
+    top: -1
+};
+const createDropTargetState = ()=>({
+        accepted: false,
+        mousePos: {
+            clientX: -1,
+            clientY: -1
+        },
+        position: void 0,
+        rect: {
+            ...NullRect
+        },
+        dropTarget: void 0
+    });
+const createActiveDropTargetState = (dropTarget)=>{
+    const { bottom, left, right, top } = dropTarget.target.getBoundingClientRect();
+    return {
+        accepted: false,
+        dropTarget,
+        mousePos: {
+            clientX: -1,
+            clientY: -1
+        },
+        position: void 0,
+        rect: {
+            bottom,
+            left,
+            right,
+            top
+        }
+    };
+};
+const useAsDropTarget = ()=>{
+    const dropTargetStateRef = useRef(createDropTargetState());
+    const drop = useGridLayoutDropHandler();
+    const leave = useGridLayoutDragLeaveHandler();
+    const preview = useGridLayoutDragPreviewHandler();
+    const dragContext = useDragContext();
+    const layoutId = useGridLayoutId();
+    const clearDropTarget = useCallback(()=>{
+        const { dropTarget } = dropTargetStateRef.current;
+        if (dropTarget) removeDropTargetPositionClassName(dropTarget.target);
+        dropTargetStateRef.current = createDropTargetState();
+    }, []);
+    useEffect(()=>{
+        const unregister = dragContext.registerDragStateCleanup(clearDropTarget);
+        return ()=>{
+            unregister();
+        };
+    }, [
+        clearDropTarget,
+        dragContext
+    ]);
+    const onDragEnter = useCallback((evt)=>{
+        if (void 0 === dragContext.dragSource) return;
+        const { dropTarget: currentDropTarget } = dropTargetStateRef.current;
+        let dropTarget = getDropTarget(evt.target, currentDropTarget, layoutId);
+        if (evt.defaultPrevented) dropTarget = void 0;
+        if (dropTarget !== currentDropTarget) {
+            if (dropTarget) {
+                if (currentDropTarget) {
+                    removeDropTargetPositionClassName(currentDropTarget.target);
+                    leave();
+                }
+                dropTargetStateRef.current = createActiveDropTargetState(dropTarget);
+            } else if (currentDropTarget) {
+                dropTargetStateRef.current.dropTarget = void 0;
+                dropTargetStateRef.current.accepted = false;
+                dropTargetStateRef.current.position = void 0;
+                removeDropTargetPositionClassName(currentDropTarget.target);
+                leave();
+            }
+        }
+    }, [
+        dragContext,
+        layoutId,
+        leave
+    ]);
+    const onDragOver = useCallback((evt)=>{
+        if (void 0 === dragContext.dragSource) return;
+        let { dropTarget: currentDropTarget } = dropTargetStateRef.current;
+        const dropTarget = getDropTarget(evt.target, currentDropTarget, layoutId);
+        if (dropTarget) {
+            if (dropTarget !== currentDropTarget) {
+                if (currentDropTarget) {
+                    removeDropTargetPositionClassName(currentDropTarget.target);
+                    leave();
+                }
+                dropTargetStateRef.current = createActiveDropTargetState(dropTarget);
+                currentDropTarget = dropTarget;
+            }
+            if (dropTarget === currentDropTarget) {
+                const { position: lastPosition } = dropTargetStateRef.current;
+                if ("header" === dropTarget.type) {
+                    if ("header" !== lastPosition || !dropTarget.target.classList.contains("vuuDropTarget-header")) {
+                        const accepted = preview(dropTarget.gridLayoutItemId, dragContext.dragSource, "header");
+                        dropTargetStateRef.current.accepted = accepted;
+                        dropTargetStateRef.current.position = "header";
+                        if (accepted) addDropTargetPositionClassName(dropTarget.target, "header");
+                    }
+                } else {
+                    const { clientX, clientY } = evt;
+                    const { mousePos } = dropTargetStateRef.current;
+                    if (clientX !== mousePos.clientX || clientY !== mousePos.clientY) {
+                        mousePos.clientX = clientX;
+                        mousePos.clientY = clientY;
+                        const { rect } = dropTargetStateRef.current;
+                        const { pctX, pctY } = pointPositionWithinRect(clientX, clientY, rect);
+                        const position = getPositionWithinBox(clientX, clientY, rect, pctX, pctY);
+                        if (position !== lastPosition || !dropTarget.target.classList.contains(`${DROPTARGET_CLASSNAME}-${position}`)) {
+                            const accepted = preview(dropTarget.gridLayoutItemId, dragContext.dragSource, position);
+                            dropTargetStateRef.current.accepted = accepted;
+                            if (accepted && dropTargetStateRef.current.dropTarget) addDropTargetPositionClassName(dropTarget.target, position);
+                            else removeDropTargetPositionClassName(dropTarget.target);
+                            dropTargetStateRef.current.position = position;
+                        }
+                    }
+                }
+                if (dropTargetStateRef.current.accepted) {
+                    evt.dataTransfer.dropEffect = "move";
+                    evt.preventDefault();
+                }
+            }
+        }
+    }, [
+        dragContext,
+        layoutId,
+        leave,
+        preview
+    ]);
+    const onDragLeave = useCallback((evt)=>{
+        if (void 0 === dragContext.dragSource) return;
+        const { dropTarget: currentDropTarget, rect: currentDropTargetRect } = dropTargetStateRef.current;
+        if (currentDropTarget?.target && !boxContainsPoint(currentDropTargetRect, evt.clientX, evt.clientY)) {
+            dropTargetStateRef.current.dropTarget = void 0;
+            dropTargetStateRef.current.accepted = false;
+            dropTargetStateRef.current.position = void 0;
+            leave();
+            removeDropTargetPositionClassName(currentDropTarget.target);
+        }
+    }, [
+        dragContext,
+        leave
+    ]);
+    const onDrop = useCallback((evt)=>{
+        if (void 0 === dragContext.dragSource) return;
+        const { dropTarget: currentDropTarget } = dropTargetStateRef.current;
+        const { dragSource } = dragContext;
+        if (dragSource && currentDropTarget) {
+            const dropTarget = getDropTarget(evt.target, currentDropTarget, layoutId);
+            if (dropTarget && dropTargetStateRef.current.accepted && dropTargetStateRef.current.position) {
+                evt.preventDefault();
+                removeDropTargetPositionClassName(dropTarget.target);
+                const dropAccepted = drop(dropTarget.gridLayoutItemId, dragSource, dropTargetStateRef.current.position);
+                if (dropAccepted) dragContext.completeDrop();
+            }
+        }
+        dropTargetStateRef.current.dropTarget = void 0;
+        dropTargetStateRef.current.accepted = false;
+        dropTargetStateRef.current.position = void 0;
+    }, [
+        dragContext,
+        drop,
+        layoutId
+    ]);
+    return {
+        onDragEnter,
+        onDragOver,
+        onDragLeave,
+        onDrop
+    };
+};
+export { useAsDropTarget };

package/src/useDraggable.js

@@ -0,0 +1,46 @@
+import { useCallback } from "react";
+import { useDragContext } from "./drag-drop-next/DragDropProviderNext.js";
+import { isTypedComponentTemplate, sourceIsComponent, sourceIsTemplate } from "./GridLayoutContext.js";
+const useDraggable = ({ getDragSource, onDragEnd, onDragStart })=>{
+    const dragContext = useDragContext();
+    const handleDragStart = useCallback((e)=>{
+        const dragSource = getDragSource(e);
+        e.stopPropagation();
+        if (sourceIsTemplate(dragSource)) onDragStart?.(e, {
+            payload: isTypedComponentTemplate(dragSource) ? dragSource.component : JSON.parse(dragSource.componentJson),
+            type: "text/json"
+        });
+        else if (sourceIsComponent(dragSource)) onDragStart?.(e, {
+            id: dragSource.id,
+            type: "text/plain"
+        });
+        else throw Error("[useDraggable] unsupported drag source type");
+        dragContext.beginDrag(e.nativeEvent, dragSource);
+        if (sourceIsComponent(dragSource)) {
+            const dragElement = e.currentTarget;
+            const targetWindow = dragElement.ownerDocument.defaultView;
+            dragElement.addEventListener("dragend", ()=>{
+                if (!dragElement.isConnected && targetWindow) targetWindow.dispatchEvent(new targetWindow.Event("dragend"));
+            }, {
+                once: true
+            });
+        }
+    }, [
+        dragContext,
+        getDragSource,
+        onDragStart
+    ]);
+    const handleDragEnd = useCallback((e)=>{
+        e.target.classList.remove("dragging");
+        onDragEnd?.(e, dragContext.dropped);
+        dragContext.endDrag();
+    }, [
+        dragContext,
+        onDragEnd
+    ]);
+    return {
+        onDragEnd: handleDragEnd,
+        onDragStart: handleDragStart
+    };
+};
+export { useDraggable };

package/src/useEditTabName.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { TabDialog } from "./TabDialog.js";
+import { useGridLayoutDispatch } from "./GridLayoutContext.js";
+const useEditTabName = ({ getNewComponent, id, mode = "add", tabLabel })=>{
+    const [confirmationOpen, setConfirmationOpen] = useState(false);
+    const dispatch = useGridLayoutDispatch();
+    const handleConfirm = useCallback((title)=>{
+        if ("add" === mode) {
+            const componentTemplate = getNewComponent?.();
+            if (componentTemplate) dispatch({
+                title,
+                type: "add-tabbed-child",
+                componentTemplate: {
+                    ...componentTemplate,
+                    label: title
+                },
+                stackId: id
+            });
+        } else dispatch({
+            type: "rename-tab",
+            id,
+            title
+        });
+        setConfirmationOpen(false);
+    }, [
+        dispatch,
+        getNewComponent,
+        id,
+        mode
+    ]);
+    const handleCancel = useCallback(()=>{
+        setConfirmationOpen(false);
+    }, []);
+    const dialog = useMemo(()=>{
+        const getDialogStyle = ()=>{
+            const tabElement = document.querySelector(`.saltTabNext[data-grid-layout-item-id="${id}"]`);
+            if (!tabElement) return;
+            {
+                const { left, bottom } = tabElement.getBoundingClientRect();
+                return {
+                    margin: 0,
+                    top: bottom + 20,
+                    left: Math.max(10, left - 20)
+                };
+            }
+        };
+        return /*#__PURE__*/ jsx(TabDialog, {
+            open: confirmationOpen,
+            onConfirm: handleConfirm,
+            onCancel: handleCancel,
+            style: getDialogStyle(),
+            tabLabel: tabLabel
+        });
+    }, [
+        confirmationOpen,
+        handleCancel,
+        handleConfirm,
+        id,
+        tabLabel
+    ]);
+    const showTabEditDialog = ()=>{
+        setConfirmationOpen(true);
+    };
+    return {
+        dialog: confirmationOpen ? dialog : null,
+        showTabEditDialog
+    };
+};
+export { useEditTabName };

package/src/useGridChildProps.js

@@ -0,0 +1,47 @@
+import { GridLayoutContext } from "./GridLayoutContext.js";
+import { getGridPosition } from "./grid-layout-utils.js";
+import { useContext } from "react";
+const useGridChildProps = (props)=>{
+    const { contentVisible, dropTarget, header, id, stackId, style, title } = props;
+    const { gridModel, gridSnapshot } = useContext(GridLayoutContext);
+    const snapshotItem = gridSnapshot?.items.find((item)=>item.id === id);
+    const stack = gridSnapshot?.stacks.find(({ id: snapshotStackId })=>snapshotStackId === id) ?? gridSnapshot?.stacks.find(({ itemIds })=>itemIds.includes(id));
+    const modelItem = gridModel?.getChildItem(id);
+    const fallbackPosition = getGridPosition(style?.gridArea ?? "1/1/2/2");
+    const position = snapshotItem ? {
+        column: {
+            end: snapshotItem.column.start + snapshotItem.column.span,
+            start: snapshotItem.column.start
+        },
+        row: {
+            end: snapshotItem.row.start + snapshotItem.row.span,
+            start: snapshotItem.row.start
+        }
+    } : stack ? (()=>{
+        const firstMember = gridSnapshot?.items.find(({ id: itemId })=>itemId === stack.itemIds[0]);
+        return firstMember ? {
+            column: {
+                end: firstMember.column.start + firstMember.column.span,
+                start: firstMember.column.start
+            },
+            row: {
+                end: firstMember.row.start + firstMember.row.span,
+                start: firstMember.row.start
+            }
+        } : fallbackPosition;
+    })() : fallbackPosition;
+    const isStackMember = void 0 !== stack && stack.id !== id;
+    return {
+        contentDetached: modelItem?.contentDetached,
+        contentVisible: isStackMember ? stack?.selectedItemId === id : snapshotItem?.contentVisible ?? contentVisible,
+        dragging: modelItem?.dragging,
+        dropTarget: snapshotItem?.dropTarget ?? dropTarget,
+        gridArea: `${position.row.start}/${position.column.start}/${position.row.end}/${position.column.end}`,
+        header: snapshotItem?.header ?? header,
+        horizontalSplitter: modelItem?.horizontalSplitter,
+        stacked: isStackMember || void 0 !== stackId,
+        title: snapshotItem?.title ?? title,
+        verticalSplitter: modelItem?.verticalSplitter
+    };
+};
+export { useGridChildProps };

package/src/useGridControllerSnapshot.js

@@ -0,0 +1,21 @@
+import { useCallback, useSyncExternalStore } from "react";
+const visibleSnapshots = new WeakMap();
+const getVisibleSnapshot = (controller)=>{
+    const snapshot = controller.getSnapshot();
+    const { revision: _revision, ...visibleState } = snapshot;
+    const signature = JSON.stringify(visibleState);
+    const cached = visibleSnapshots.get(controller);
+    if (cached?.signature === signature) return cached.snapshot;
+    visibleSnapshots.set(controller, {
+        signature,
+        snapshot
+    });
+    return snapshot;
+};
+const useGridControllerSnapshot = (controller)=>{
+    const getSnapshot = useCallback(()=>getVisibleSnapshot(controller), [
+        controller
+    ]);
+    return useSyncExternalStore(controller.subscribe, getSnapshot, getSnapshot);
+};
+export { useGridControllerSnapshot };