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

package/src/GridLayoutDocumentIds.js

@@ -0,0 +1,110 @@
+import { GRID_LAYOUT_DOCUMENT_KIND, GRID_LAYOUT_DOCUMENT_VERSION } from "./GridLayoutDocument.js";
+const createSequentialGridLayoutIdAllocator = (prefix = "clone")=>{
+    let nextId = 1;
+    return (kind)=>`${prefix}-${kind}-${nextId++}`;
+};
+const isNestedDocument = (value)=>{
+    if ("object" != typeof value || null === value || Array.isArray(value)) return false;
+    const record = value;
+    return record.kind === GRID_LAYOUT_DOCUMENT_KIND && record.version === GRID_LAYOUT_DOCUMENT_VERSION && "object" == typeof record.layout && null !== record.layout && !Array.isArray(record.layout) && Array.isArray(record.components);
+};
+const remapGridLayoutDocumentIds = (source, allocate)=>{
+    const mappings = [];
+    const remapDocument = (document, path)=>{
+        const allocateId = (kind, oldId, idPath)=>{
+            const newId = allocate(kind, oldId, idPath);
+            mappings.push({
+                kind,
+                newId,
+                oldId,
+                path: idPath
+            });
+            return newId;
+        };
+        const gridId = allocateId("grid", document.layout.id, `${path}.layout.id`);
+        const itemIds = new Map(document.layout.items.map(({ id }, index)=>[
+                id,
+                allocateId("item", id, `${path}.layout.items[${index}].id`)
+            ]));
+        const implicitComponentItemIds = new Map(document.layout.items.flatMap((item)=>void 0 === item.componentInstanceId ? [
+                [
+                    item.id,
+                    itemIds.get(item.id) ?? item.id
+                ]
+            ] : []));
+        const componentIds = new Map(document.components.map(({ id }, index)=>{
+            const implicitItemId = implicitComponentItemIds.get(id);
+            if (implicitItemId) {
+                mappings.push({
+                    kind: "component",
+                    newId: implicitItemId,
+                    oldId: id,
+                    path: `${path}.components[${index}].id`
+                });
+                return [
+                    id,
+                    implicitItemId
+                ];
+            }
+            return [
+                id,
+                allocateId("component", id, `${path}.components[${index}].id`)
+            ];
+        }));
+        const stackIds = new Map(document.layout.stacks.map(({ id }, index)=>[
+                id,
+                allocateId("stack", id, `${path}.layout.stacks[${index}].id`)
+            ]));
+        const remapJson = (value, valuePath)=>{
+            if (isNestedDocument(value)) return remapDocument(value, valuePath);
+            if (Array.isArray(value)) return value.map((entry, index)=>remapJson(entry, `${valuePath}[${index}]`));
+            if ("object" == typeof value && null !== value) return Object.fromEntries(Object.entries(value).map(([key, entry])=>[
+                    key,
+                    remapJson(entry, `${valuePath}.${key}`)
+                ]));
+            return value;
+        };
+        return {
+            components: document.components.map((component, index)=>({
+                    ...component,
+                    id: componentIds.get(component.id) ?? component.id,
+                    settings: remapJson(component.settings, `${path}.components[${index}].settings`)
+                })),
+            kind: GRID_LAYOUT_DOCUMENT_KIND,
+            layout: {
+                columns: [
+                    ...document.layout.columns
+                ],
+                id: gridId,
+                items: document.layout.items.map((item)=>({
+                        ...item,
+                        column: {
+                            ...item.column
+                        },
+                        ...void 0 === item.componentInstanceId ? {} : {
+                            componentInstanceId: componentIds.get(item.componentInstanceId) ?? item.componentInstanceId
+                        },
+                        id: itemIds.get(item.id) ?? item.id,
+                        row: {
+                            ...item.row
+                        }
+                    })),
+                placeholderIds: document.layout.placeholderIds.map((id)=>itemIds.get(id) ?? id),
+                rows: [
+                    ...document.layout.rows
+                ],
+                stacks: document.layout.stacks.map((stack)=>({
+                        id: stackIds.get(stack.id) ?? stack.id,
+                        itemIds: stack.itemIds.map((id)=>itemIds.get(id) ?? id),
+                        selectedItemId: itemIds.get(stack.selectedItemId) ?? stack.selectedItemId
+                    }))
+            },
+            version: GRID_LAYOUT_DOCUMENT_VERSION
+        };
+    };
+    return {
+        document: remapDocument(source, "$"),
+        mappings
+    };
+};
+export { createSequentialGridLayoutIdAllocator, remapGridLayoutDocumentIds };

package/src/GridLayoutItem.css.js

@@ -0,0 +1,46 @@
+const css = `
+.vuuGridLayoutItem {
+  --vuu-header-height: var(--header-height, 25px);
+  border: 1px solid #fff;
+  flex-direction: column;
+  display: flex;
+  position: relative;
+
+  &.has-h-splitter:not(.vuu-stacked) {
+    margin-top: 7px;
+  }
+
+  &.has-v-splitter {
+    margin-left: 7px;
+  }
+}
+
+.vuuGridLayoutItem-active {
+  position: relative;
+}
+
+.vuuGridLayoutItemHeader {
+  cursor: grab;
+  flex: 0 0 var(--vuu-grid-header-height);
+  height: var(--vuu-grid-header-height);
+  padding: 0 var(--salt-spacing-100) 0 0;
+  background-color: #ccc;
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  & [data-align="right"] {
+    margin-left: auto;
+  }
+
+  & .vuuGridLayoutItemHeader-title {
+    height: 100%;
+    padding: 0 var(--salt-spacing-200);
+    align-items: center;
+    display: flex;
+  }
+}
+
+
+`;
+export default css;

package/src/GridLayoutItem.js

@@ -0,0 +1,147 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, isValidElement, useCallback } from "react";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { queryClosest, registerComponent } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { componentToJson } from "./componentToJson.js";
+import { useGridLayoutDispatch, useGridLayoutDragEndHandler, useGridLayoutDragStartHandler } from "./GridLayoutContext.js";
+import { resolveMinimumGridItemSize } from "./GridModel.js";
+import { IconButton } from "./IconButton.js";
+import { useAsDropTarget } from "./useAsDropTarget.js";
+import { useDraggable } from "./useDraggable.js";
+import { useGridChildProps } from "./useGridChildProps.js";
+import { useNotDropTarget } from "./useNotDropTarget.js";
+import GridLayoutItem from "./GridLayoutItem.css";
+const classBaseItem = "vuuGridLayoutItem";
+const getDragSource = (evt)=>{
+    const draggedItem = queryClosest(evt.target, ".vuuGridLayoutItem");
+    const dragElement = draggedItem?.querySelector(".vuuDraggableLabel") || void 0;
+    if (draggedItem) {
+        const gridLayout = queryClosest(draggedItem, ".vuuGridLayout", true);
+        return {
+            dragElement,
+            element: draggedItem,
+            id: draggedItem.id,
+            layoutId: gridLayout.id,
+            label: draggedItem.querySelector(".vuuDraggableLabel")?.textContent ?? "no label",
+            type: "component"
+        };
+    }
+    throw Error("GridLayoutItem no found");
+};
+const GridLayoutItem_GridLayoutItem = ({ children, className: classNameProp, contentVisible: contentVisibleProp, "data-drop-target": dataDropTarget, header: headerProp, height, id, minHeight, minWidth, stackId, resizeable, style: styleProp, title: titleProp, width, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-grid-layout",
+        css: GridLayoutItem,
+        window: targetWindow
+    });
+    const dispatch = useGridLayoutDispatch();
+    const modelMinHeight = resolveMinimumGridItemSize(minHeight, styleProp?.minHeight);
+    const modelMinWidth = resolveMinimumGridItemSize(minWidth, styleProp?.minWidth);
+    const { contentDetached, contentVisible, dragging, dropTarget, gridArea, header, horizontalSplitter, stacked, title, verticalSplitter } = useGridChildProps({
+        contentVisible: contentVisibleProp,
+        dropTarget: dataDropTarget,
+        header: headerProp,
+        height,
+        id,
+        minHeight: modelMinHeight,
+        minWidth: modelMinWidth,
+        resizeable,
+        stackId,
+        style: styleProp,
+        title: titleProp,
+        width
+    });
+    const onDragEnd = useGridLayoutDragEndHandler();
+    const onDragStart = useGridLayoutDragStartHandler();
+    const onClose = useCallback((evt)=>{
+        evt.stopPropagation();
+        dispatch({
+            type: "close",
+            id
+        });
+    }, [
+        dispatch,
+        id
+    ]);
+    const useDropTargetHook = dropTarget ? useAsDropTarget : useNotDropTarget;
+    const droppableProps = useDropTargetHook();
+    const draggableProps = useDraggable({
+        draggableClassName: classBaseItem,
+        getDragSource: getDragSource,
+        onDragEnd,
+        onDragStart
+    });
+    const className = clsx(classBaseItem, {
+        "vuuGridLayoutItem-dragging": dragging,
+        "vuu-detached": contentDetached,
+        "vuu-stacked": stacked && !contentDetached,
+        "has-h-splitter": horizontalSplitter,
+        "has-v-splitter": verticalSplitter
+    });
+    const style = {
+        ...styleProp,
+        gridArea,
+        ...void 0 === minHeight ? {} : {
+            minHeight
+        },
+        ...void 0 === minWidth ? {} : {
+            minWidth
+        },
+        "--header-height": header ? "25px" : "0px"
+    };
+    return contentVisible || contentDetached ? /*#__PURE__*/ createElement("div", {
+        ...htmlAttributes,
+        ...draggableProps,
+        ...droppableProps,
+        className: clsx(className, classNameProp),
+        id: id,
+        key: id,
+        style: style,
+        children: [
+            header && !stacked ? /*#__PURE__*/ jsxs("div", {
+                className: clsx(`${classBaseItem}Header`),
+                "data-drop-target": "header",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBaseItem}Header-title vuuDraggableLabel`,
+                        draggable: true,
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsx(IconButton, {
+                        className: `${classBaseItem}Header-close`,
+                        "data-align": "right",
+                        icon: "close",
+                        onClick: onClose,
+                        variant: "secondary"
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: clsx(`${classBaseItem}Content`),
+                "data-drop-target": dropTarget,
+                children: children
+            })
+        ]
+    }) : null;
+};
+(/*#__PURE__*/ createElement(GridLayoutItem_GridLayoutItem)).type;
+const isGridLayoutItem = (element)=>element.type === GridLayoutItem_GridLayoutItem;
+GridLayoutItem_GridLayoutItem.toJSON = (element)=>{
+    let { children } = element.props;
+    if (Array.isArray(children)) {
+        if (children.length > 1) throw Error("[GridLayoutItem] cannot have more than one child element");
+        [children] = children;
+    }
+    if (/*#__PURE__*/ isValidElement(children)) {
+        const child = componentToJson(children);
+        return {
+            ...child
+        };
+    }
+    throw Error("[GridLayoutItem] children is not a react element");
+};
+registerComponent("GridLayoutItem", GridLayoutItem_GridLayoutItem, "component");
+export { GridLayoutItem_GridLayoutItem as GridLayoutItem, isGridLayoutItem };

package/src/GridLayoutLegacyCompatibility.js

@@ -0,0 +1,66 @@
+import { createElement } from "react";
+import { gridLayoutDescriptorToSnapshot } from "./grid-snapshot-adapters.js";
+import { GridLayoutItem } from "./GridLayoutItem.js";
+import { layoutFromJson } from "./layoutFromJson.js";
+import { toJsonValue } from "./json-value.js";
+const decodeLegacySerializedGridLayout = (value)=>{
+    const json = toJsonValue(value);
+    if (!json.ok) return {
+        error: {
+            code: "INVALID_LEGACY_GRID_LAYOUT",
+            message: json.error.message,
+            path: json.error.path,
+            version: 1
+        },
+        ok: false
+    };
+    try {
+        return {
+            ok: true,
+            value: {
+                components: value.components,
+                snapshot: gridLayoutDescriptorToSnapshot(value.layout, {
+                    gridId: value.id
+                })
+            }
+        };
+    } catch (cause) {
+        return {
+            error: {
+                code: "INVALID_LEGACY_GRID_LAYOUT",
+                message: cause instanceof Error ? cause.message : "invalid legacy GridLayout",
+                path: "$.layout",
+                version: 1
+            },
+            ok: false
+        };
+    }
+};
+const createLegacyGridLayoutReader = (serializedLayout)=>{
+    const decoded = decodeLegacySerializedGridLayout(serializedLayout);
+    if (!decoded.ok) throw new Error(`${decoded.error.path}: ${decoded.error.message}`);
+    return {
+        getSavedGrid (id) {
+            if (id !== serializedLayout.id) return;
+            return {
+                components: Object.entries(serializedLayout.components).reduce((components, [itemId, component])=>{
+                    const item = serializedLayout.layout.gridLayoutItems?.[itemId];
+                    if (!item) throw new Error(`$.layout.gridLayoutItems.${itemId}: legacy component has no matching layout item`);
+                    const { gridArea, ...props } = item;
+                    components[itemId] = /*#__PURE__*/ createElement(GridLayoutItem, {
+                        ...props,
+                        id: itemId,
+                        key: itemId,
+                        style: {
+                            gridArea
+                        }
+                    }, layoutFromJson(component));
+                    return components;
+                }, {}),
+                id,
+                layout: serializedLayout.layout
+            };
+        }
+    };
+};
+export { createLegacyGridLayoutReader, decodeLegacySerializedGridLayout };

package/src/GridLayoutModel.js

@@ -0,0 +1,138 @@
+import { EventEmitter, uuid } from "@vuu-ui/vuu-utils";
+import { canSplitGridItem, doesResizeRequireNewTrack, gridResizeDirectionForSplit, insertTrackForResize, removeGridItem, replaceGridItem, shiftItemsForRemovedTrack, splitGridItem } from "./GridGeometry.js";
+import { toGridItemUpdates } from "./GridModel.js";
+class GridLayoutModel extends EventEmitter {
+    gridModel;
+    splitters;
+    constructor(gridModel){
+        super(), this.gridModel = gridModel;
+    }
+    applyRemoveTransition(transition) {
+        const [removal] = transition.removals;
+        const gridItem = this.gridModel.getChildItem(removal.id, true);
+        const stackId = gridItem.stackId;
+        this.gridModel.removeChildItem(removal.id, removal.reason);
+        if (transition.stackMember && stackId) {
+            const result = this.gridModel.removeStackItem(stackId, gridItem.id);
+            if (!result.ok) throw Error(result.error.message);
+            return;
+        }
+        this.gridModel.applyGeometryPositions(transition.geometry);
+        if (transition.columns) this.gridModel.tracks.applyTrackTransition("column", transition.columns);
+        if (transition.rows) this.gridModel.tracks.applyTrackTransition("row", transition.rows);
+        if (transition.notify) this.emit("child-position-updates", toGridItemUpdates(transition.updates), {
+            placeholders: true,
+            splitters: true
+        });
+        if (transition.placeholders) this.gridModel.applyPlaceholderTransition(transition.placeholders);
+    }
+    removeGridItem(gridItemId, reason) {
+        const geometry = this.gridModel.toGeometry();
+        const result = this.gridModel.runGeometry((measurements)=>removeGridItem(geometry, {
+                itemId: gridItemId,
+                reason
+            }, {
+                createPlaceholderId: uuid,
+                measurements
+            }));
+        if (!result.ok) throw Error(result.error.message);
+        this.applyRemoveTransition(result.value);
+    }
+    applyReplaceTransition(transition) {
+        for (const { id, reason } of transition.removals)this.gridModel.removeChildItem(id, reason);
+        this.gridModel.applyGeometryPositions(transition.geometry);
+    }
+    dropReplaceGridItem(droppedItemId, targetItemId) {
+        const droppedGridItem = this.gridModel.getChildItem(droppedItemId, true);
+        const result = replaceGridItem(this.gridModel.toGeometry(), {
+            droppedItemId,
+            targetItemId
+        });
+        if (!result.ok) throw Error(result.error.message);
+        this.applyReplaceTransition(result.value);
+        return droppedGridItem;
+    }
+    createSplitters() {
+        return this.splitters = this.gridModel.getSplitters();
+    }
+    getSplitterById(splitterId) {
+        const splitter = this.splitters?.find(({ id })=>id === splitterId);
+        if (splitter) return splitter;
+        throw Error(`[GridLayoutModel] getSplitterId #${splitterId}`);
+    }
+    getSplitter(gridLayoutItem, resizeDirection) {
+        const splitter = this.splitters?.find(({ controls, orientation })=>controls === gridLayoutItem.id && orientation === resizeDirection);
+        if (splitter) return splitter;
+        throw Error(`no splitter for gridItem ${gridLayoutItem.id} (${resizeDirection})`);
+    }
+    applyInsertTrackTransition(trackType, transition) {
+        const trackTransition = "column" === trackType ? transition.columns : transition.rows;
+        if (trackTransition) this.gridModel.tracks.applyTrackTransition(trackType, trackTransition);
+        this.gridModel.applyUpdates(toGridItemUpdates(transition.insertUpdates));
+        this.gridModel.emit("child-position-updates", toGridItemUpdates(transition.insertUpdates), {
+            splitters: true
+        });
+        this.gridModel.applyGeometryPositions(transition.geometry);
+        this.emit("child-position-updates", toGridItemUpdates(transition.anchorUpdates), {
+            splitters: true
+        });
+    }
+    addTrackForResize(trackType, newTrackSize, resizeOperation, index, state) {
+        const { splitter } = state;
+        const { before: contraItemIds, after: resizeItemIds } = splitter.resizedChildItems;
+        const position = "expand" === resizeOperation ? "before" : "after";
+        const geometry = this.gridModel.toGeometry();
+        const result = this.gridModel.runGeometry((measurements)=>insertTrackForResize(geometry, {
+                contraItemIds,
+                index,
+                position,
+                resizeItemIds,
+                size: newTrackSize,
+                trackType
+            }, measurements));
+        if (!result.ok) throw Error(result.error.message);
+        this.applyInsertTrackTransition(trackType, result.value);
+    }
+    applySplitTransition(transition) {
+        if (transition.columns) this.gridModel.tracks.applyTrackTransition("column", transition.columns);
+        if (transition.rows) this.gridModel.tracks.applyTrackTransition("row", transition.rows);
+        this.gridModel.applyGeometryPositions(transition.geometry);
+        this.emit("child-position-updates", toGridItemUpdates(transition.updates), {
+            splitters: true
+        });
+    }
+    dropSplitGridItem(droppedItemId, targetItemId, splitDirection, resizeDirection = gridResizeDirectionForSplit(splitDirection)) {
+        const geometry = this.gridModel.toGeometry();
+        const result = this.gridModel.runGeometry((measurements)=>splitGridItem(geometry, {
+                droppedItemId,
+                resizeDirection,
+                splitDirection,
+                targetItemId
+            }, measurements));
+        if (!result.ok) {
+            if ("NON_RESIZABLE" === result.error.code) return false;
+            throw Error(result.error.message);
+        }
+        this.applySplitTransition(result.value);
+        return true;
+    }
+    canSplitGridItem(targetItemId, splitDirection) {
+        return canSplitGridItem(this.gridModel.getChildItem(targetItemId, true), splitDirection);
+    }
+    removeTrack(trackIndex, resizeDirection) {
+        const trackType = "horizontal" === resizeDirection ? "column" : "row";
+        const updates = toGridItemUpdates(shiftItemsForRemovedTrack(this.gridModel.toGeometry().items, trackType, trackIndex));
+        this.gridModel.applyUpdates(updates);
+        return updates;
+    }
+    isResizeTrackShared(splitter) {
+        if (this.splitters) return doesResizeRequireNewTrack(this.splitters, splitter);
+        throw Error("[GridLayoutModel] isResizeTrackShared, no splitters created");
+    }
+    toDebugString() {
+        return `
+      ${this.gridModel.childItems.map(({ id, column, resizeable = "", row })=>`\n${id}\t\tcol ${column.start}/${column.end}\t row ${row.start}/${row.end}\t${resizeable}`).join("")}
+    `;
+    }
+}
+export { GridLayoutModel };