@vuu-ui/vuu-layout 2.1.19-beta.1 → 2.1.19-beta.2

package/src/layout-reducer/insert-layout-element.js

@@ -0,0 +1,179 @@
+import { uuid } from "@vuu-ui/vuu-utils";
+import react from "react";
+import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.js";
+import { createPlaceHolder, getFlexDimensions, getFlexOrIntrinsicStyle, getIntrinsicSize, wrapIntrinsicSizeComponentWithFlexbox } from "./flexUtils.js";
+import { getDefaultTabLabel, getManagedDimension } from "./layoutUtils.js";
+function getInsertTabBeforeAfter(stack, pos) {
+    const { children: tabs } = stack.props;
+    const tabCount = tabs.length;
+    const { index = -1, positionRelativeToTab = "after" } = pos.tab || {};
+    return -1 === index || index >= tabCount ? [
+        tabs[tabCount - 1],
+        "after"
+    ] : [
+        tabs[index] ?? null,
+        positionRelativeToTab
+    ];
+}
+function insertIntoContainer(container, targetContainer, newComponent) {
+    const { active: containerActive, children: containerChildren = [], path: containerPath } = getProps(container);
+    const existingComponentPath = getProp(targetContainer, "path");
+    const { idx, finalStep } = nextStep(containerPath, existingComponentPath, true);
+    const [insertedIdx, children] = finalStep ? insertIntoChildren(container, containerChildren, newComponent) : [
+        containerActive,
+        containerChildren?.map((child, index)=>index === idx ? insertIntoContainer(child, targetContainer, newComponent) : child)
+    ];
+    const active = "Stack" === typeOf(container) ? Array.isArray(insertedIdx) ? insertedIdx[0] : insertedIdx : containerActive;
+    return react.cloneElement(container, {
+        active
+    }, children);
+}
+const getDefaultTitle = (containerType, component, index, existingLabels)=>"Stack" === containerType ? getDefaultTabLabel(component, index, existingLabels) : void 0;
+const getChildrenTitles = (children)=>children.map((child)=>child.props.title);
+function insertIntoChildren(container, containerChildren, newComponent) {
+    if (Array.isArray(newComponent)) {
+        const [firstChild, ...rest] = newComponent;
+        let [idx, children] = insertIntoChildren(container, containerChildren, firstChild);
+        for (const child of rest)[, children] = insertIntoChildren(container, children, child);
+        return [
+            idx,
+            children
+        ];
+    }
+    const containerPath = getProp(container, "path");
+    const count = containerChildren?.length;
+    const { id = uuid(), title = getDefaultTitle(typeOf(container), newComponent, count ?? 0, getChildrenTitles(containerChildren)) } = getProps(newComponent);
+    if (count) return [
+        count,
+        containerChildren.concat(resetPath(newComponent, `${containerPath}.${count}`, {
+            id,
+            key: id,
+            title
+        }))
+    ];
+    return [
+        0,
+        [
+            resetPath(newComponent, `${containerPath}.0`, {
+                id,
+                title
+            })
+        ]
+    ];
+}
+function insertBesideChild(container, existingComponent, newComponent, insertionPosition, pos, clientRect, dropRect) {
+    const { active: containerActive, children: containerChildren, path: containerPath } = getProps(container);
+    const existingComponentPath = getProp(existingComponent, "path");
+    const { idx, finalStep } = nextStep(containerPath, existingComponentPath);
+    const [insertedIdx, children] = finalStep ? updateChildren(container, containerChildren, idx, newComponent, insertionPosition, pos, clientRect, dropRect) : [
+        containerActive,
+        containerChildren.map((child, index)=>index === idx ? insertBesideChild(child, existingComponent, newComponent, insertionPosition, pos, clientRect, dropRect) : child)
+    ];
+    const active = "Stack" === typeOf(container) ? insertedIdx : containerActive;
+    return react.cloneElement(container, {
+        active
+    }, children);
+}
+function updateChildren(container, containerChildren, idx, newComponent, insertionPosition, pos, clientRect, dropRect) {
+    const intrinsicSize = getIntrinsicSize(newComponent);
+    if (intrinsicSize?.width && intrinsicSize?.height) return insertIntrinsicSizedComponent(container, containerChildren, idx, newComponent, insertionPosition, clientRect, dropRect);
+    return insertFlexComponent(container, containerChildren, idx, newComponent, insertionPosition, pos?.width || pos?.height, clientRect);
+}
+const getLeadingPlaceholderSize = (flexDirection, insertionPosition, { top, right, bottom, left }, [rectLeft, rectTop, rectRight, rectBottom])=>{
+    if ("column" === flexDirection && "before" === insertionPosition) return rectTop - top;
+    if ("column" === flexDirection) return bottom - rectBottom;
+    if ("row" === flexDirection && "before" === insertionPosition) return rectLeft - left;
+    if ("row" === flexDirection) return right - rectRight;
+};
+function insertIntrinsicSizedComponent(container, containerChildren, idx, newComponent, insertionPosition, clientRect, dropRect) {
+    const { style: { flexDirection } } = getProps(container);
+    const [dimension, crossDimension, contraDirection] = getFlexDimensions(flexDirection);
+    const { [crossDimension]: intrinsicCrossSize, [dimension]: intrinsicSize } = getIntrinsicSize(newComponent);
+    const path = getProp(containerChildren[idx], "path");
+    const placeholderSize = getLeadingPlaceholderSize(flexDirection, insertionPosition, clientRect, dropRect);
+    const [itemToInsert, size] = intrinsicCrossSize < clientRect[crossDimension] ? [
+        wrapIntrinsicSizeComponentWithFlexbox(newComponent, contraDirection, path, clientRect, dropRect),
+        intrinsicSize
+    ] : [
+        newComponent,
+        void 0
+    ];
+    const placeholder = placeholderSize ? createPlaceHolder(path, placeholderSize, {
+        flexGrow: 0,
+        flexShrink: 0
+    }) : void 0;
+    if (intrinsicCrossSize > clientRect[crossDimension]) containerChildren = containerChildren.map((child)=>{
+        if (getProp(child, "placeholder")) return child;
+        {
+            const { [crossDimension]: intrinsicCrossChildSize } = getIntrinsicSize(child);
+            if (intrinsicCrossChildSize && intrinsicCrossChildSize < intrinsicCrossSize) return wrapIntrinsicSizeComponentWithFlexbox(child, contraDirection, getProp(child, "path"));
+            return child;
+        }
+    });
+    return insertFlexComponent(container, containerChildren, idx, itemToInsert, insertionPosition, size, clientRect, placeholder);
+}
+function insertFlexComponent(container, containerChildren, idx, newComponent, insertionPosition, size, targetRect, placeholder) {
+    const containerPath = getProp(container, "path");
+    let insertedIdx = 0;
+    const children = containerChildren && 0 !== containerChildren.length ? containerChildren.reduce((arr, child, i)=>{
+        if (idx === i) {
+            const [existingComponent, insertedComponent] = getStyledComponents(container, child, newComponent, targetRect);
+            if ("before" === insertionPosition) if (placeholder) arr.push(placeholder, insertedComponent, existingComponent);
+            else arr.push(insertedComponent, existingComponent);
+            else if (placeholder) arr.push(existingComponent, insertedComponent, placeholder);
+            else arr.push(existingComponent, insertedComponent);
+            insertedIdx = arr.indexOf(insertedComponent);
+        } else arr.push(child);
+        return arr;
+    }, []).map((child, i)=>i < insertedIdx ? child : resetPath(child, `${containerPath}.${i}`)) : [
+        newComponent
+    ];
+    return [
+        insertedIdx,
+        children
+    ];
+}
+function getStyledComponents(container, existingComponent, newComponent, targetRect) {
+    const id = uuid();
+    let { version = 0 } = getProps(newComponent);
+    version += 1;
+    if ("Flexbox" === typeOf(container)) {
+        const { style: containerStyle } = container.props;
+        const [dim] = getManagedDimension(containerStyle);
+        const splitterSize = 6;
+        const size = {
+            [dim]: (targetRect[dim] - splitterSize) / 2
+        };
+        const existingComponentStyle = getFlexOrIntrinsicStyle(existingComponent, dim, size);
+        const newComponentStyle = getFlexOrIntrinsicStyle(newComponent, dim, size);
+        return [
+            react.cloneElement(existingComponent, {
+                style: existingComponentStyle
+            }),
+            react.cloneElement(newComponent, {
+                id,
+                version,
+                style: newComponentStyle
+            })
+        ];
+    }
+    {
+        const { style: { left: _1, top: _2, flex: _3, ...style } = {
+            left: void 0,
+            top: void 0,
+            flex: void 0
+        } } = getProps(newComponent);
+        return [
+            existingComponent,
+            react.cloneElement(newComponent, {
+                id,
+                version,
+                style: {
+                    ...style,
+                    flex: "1 1 0px"
+                }
+            })
+        ];
+    }
+}
+export { getInsertTabBeforeAfter, insertBesideChild, insertIntoContainer };

package/src/layout-reducer/layout-reducer.js

@@ -0,0 +1,121 @@
+import { isContainer } from "@vuu-ui/vuu-utils";
+import react from "react";
+import { findTarget, followPath, followPathToParent, getProp, getProps, typeOf } from "../utils/index.js";
+import { getIntrinsicSize } from "./flexUtils.js";
+import { getInsertTabBeforeAfter, insertBesideChild, insertIntoContainer } from "./insert-layout-element.js";
+import { moveChild } from "./move-layout-element.js";
+import { LayoutActionType } from "./layoutTypes.js";
+import { removeChild } from "./remove-layout-element.js";
+import { _replaceChild, replaceChild, swapChild } from "./replace-layout-element.js";
+import { resizeFlexChild, resizeFlexChildren } from "./resize-flex-children.js";
+import { wrap } from "./wrap-layout-element.js";
+const layoutReducer = (state, action)=>{
+    switch(action.type){
+        case LayoutActionType.ADD:
+            return addChild(state, action);
+        case LayoutActionType.DRAG_DROP:
+            return dragDrop(state, action);
+        case "collapse":
+        case "expand":
+            return setChildProps(state, action);
+        case LayoutActionType.REMOVE:
+            return removeChild(state, action);
+        case LayoutActionType.REPLACE:
+            return replaceChild(state, action);
+        case LayoutActionType.SET_PROP:
+            return setProp(state, action);
+        case LayoutActionType.SET_PROPS:
+            return setProps(state, action);
+        case LayoutActionType.SET_TITLE:
+            return setProp(state, {
+                type: "set-prop",
+                path: action.path,
+                propName: "title",
+                propValue: action.title
+            });
+        case LayoutActionType.SPLITTER_RESIZE:
+            return resizeFlexChildren(state, action);
+        case LayoutActionType.LAYOUT_RESIZE:
+            return resizeFlexChild(state, action);
+        case LayoutActionType.SWITCH_TAB:
+            return switchTab(state, action);
+        case LayoutActionType.MOVE_CHILD:
+            return moveChild(state, action);
+        default:
+            return state;
+    }
+};
+const switchTab = (state, { path, nextIdx })=>{
+    const target = followPath(state, path, true);
+    const replacement = react.cloneElement(target, {
+        active: nextIdx
+    });
+    return swapChild(state, target, replacement);
+};
+const setProp = (state, { path, propName, propValue })=>{
+    const target = followPath(state, path, true);
+    const replacement = react.cloneElement(target, {
+        [propName]: propValue
+    });
+    return swapChild(state, target, replacement);
+};
+const setProps = (state, { path, props })=>{
+    const target = followPath(state, path, true);
+    const replacement = react.cloneElement(target, props);
+    return swapChild(state, target, replacement);
+};
+const setChildProps = (state, { path, type })=>{
+    if (!path) return state;
+    {
+        const target = followPath(state, path, true);
+        return swapChild(state, target, target, type);
+    }
+};
+const dragDrop = (layoutRoot, action)=>{
+    const { draggedReactElement: newComponent, dragInstructions, dropTarget } = action;
+    const existingComponent = dropTarget.component;
+    const { pos } = dropTarget;
+    const destinationTabstrip = pos?.position?.Header && "Stack" === typeOf(existingComponent);
+    const { id, version } = getProps(newComponent);
+    const intrinsicSize = getIntrinsicSize(newComponent);
+    let newLayoutRoot;
+    if (destinationTabstrip) {
+        const [targetTab, insertionPosition] = getInsertTabBeforeAfter(existingComponent, pos);
+        newLayoutRoot = void 0 === targetTab ? insertIntoContainer(layoutRoot, existingComponent, newComponent) : insertBesideChild(layoutRoot, targetTab, newComponent, insertionPosition);
+    } else newLayoutRoot = !intrinsicSize && pos?.position?.Centre ? _replaceChild(layoutRoot, existingComponent, newComponent) : dropLayoutIntoContainer(layoutRoot, dropTarget, newComponent);
+    if (dragInstructions.DoNotRemove) return newLayoutRoot;
+    const finalTarget = findTarget(newLayoutRoot, (props)=>props.id === id && props.version === version);
+    const finalPath = getProp(finalTarget, "path");
+    return removeChild(newLayoutRoot, {
+        path: finalPath,
+        type: "remove"
+    });
+};
+const addChild = (layoutRoot, { path: containerPath, component })=>insertIntoContainer(layoutRoot, followPath(layoutRoot, containerPath), component);
+const dropLayoutIntoContainer = (layoutRoot, dropTarget, newComponent)=>{
+    const { component, pos, clientRect, dropRect } = dropTarget;
+    const existingComponent = component;
+    const existingComponentPath = getProp(existingComponent, "path");
+    if ("0.0" === existingComponentPath) return wrap(layoutRoot, existingComponent, newComponent, pos);
+    const targetContainer = followPathToParent(layoutRoot, existingComponentPath);
+    if (withTheGrain(pos, targetContainer)) {
+        const insertionPosition = pos.position.SouthOrEast ? "after" : "before";
+        return insertBesideChild(layoutRoot, existingComponent, newComponent, insertionPosition, pos, clientRect, dropRect);
+    }
+    if (!withTheGrain(pos, targetContainer)) return wrap(layoutRoot, existingComponent, newComponent, pos, clientRect, dropRect);
+    if (isContainer(typeOf(targetContainer))) return wrap(layoutRoot, existingComponent, newComponent, pos);
+    throw Error(`no support right now for position = ${pos.position}`);
+};
+const withTheGrain = (pos, container)=>{
+    if (pos.position.Centre) return isTerrace(container) || isTower(container);
+    return pos.position.NorthOrSouth ? isTower(container) : pos.position.EastOrWest ? isTerrace(container) : false;
+};
+const isTower = (container)=>{
+    const { style } = container.props;
+    return "Flexbox" === typeOf(container) && "column" === style.flexDirection;
+};
+const isTerrace = (container)=>{
+    const { style } = container.props;
+    return "Flexbox" === typeOf(container) && "column" !== style.flexDirection;
+};
+export { layoutReducer };

package/src/layout-reducer/layoutTypes.js

@@ -0,0 +1,34 @@
+const LayoutActionType = {
+    ADD: "add",
+    DRAG_START: "drag-start",
+    DRAG_DROP: "drag-drop",
+    LAYOUT_RESIZE: "layout-resize",
+    MAXIMIZE: "maximize",
+    MINIMIZE: "minimize",
+    MOVE_CHILD: "move-child",
+    QUERY: "query",
+    REMOVE: "remove",
+    REPLACE: "replace",
+    RESTORE: "restore",
+    SET_PROP: "set-prop",
+    SET_PROPS: "set-props",
+    SET_TITLE: "set-title",
+    SPLITTER_RESIZE: "splitter-resize",
+    SWITCH_TAB: "switch-tab",
+    TEAROUT: "tearout"
+};
+const isApplicationLevelChange = (layoutChangeReason)=>[
+        "switch-active-layout",
+        "open-layout",
+        "close-layout",
+        "rename-layout"
+    ].includes(layoutChangeReason);
+const isLayoutLevelChange = (layoutChangeReason)=>[
+        "switch-active-tab",
+        "edit-feature-title",
+        "save-feature-props",
+        "remove-component",
+        "resize-component",
+        "drag-drop-operation"
+    ].includes(layoutChangeReason);
+export { LayoutActionType, isApplicationLevelChange, isLayoutLevelChange };

package/src/layout-reducer/layoutUtils.js

@@ -0,0 +1,178 @@
+import { getLayoutComponent, isContainer, isLayoutComponent, uuid } from "@vuu-ui/vuu-utils";
+import react, { cloneElement } from "react";
+import { getPersistentState, hasPersistentState, setPersistentState } from "../use-persistent-state.js";
+import { expandFlex, followPathToParent, getProps, typeOf } from "../utils/index.js";
+const getManagedDimension = (style)=>"column" === style.flexDirection ? [
+        "height",
+        "width"
+    ] : [
+        "width",
+        "height"
+    ];
+const theKidHasNoStyle = {};
+const applyLayoutProps = (component, path = "0")=>{
+    const [layoutProps, children] = getChildLayoutProps(typeOf(component), component.props, path);
+    return react.cloneElement(component, layoutProps, children);
+};
+const cloneElementAddLayoutProps = (layoutElement, previousLayout)=>{
+    const type = typeOf(layoutElement);
+    const [layoutProps, children] = getChildLayoutProps(type, layoutElement.props, "0", void 0, previousLayout);
+    return cloneElement(layoutElement, layoutProps, children);
+};
+const applyLayout = (type, props, previousLayout)=>{
+    const [layoutProps, children] = getChildLayoutProps(type, props, "0", void 0, previousLayout);
+    return {
+        ...props,
+        ...layoutProps,
+        type,
+        children
+    };
+};
+function getLayoutProps(type, props, path = "0", parentType = null, previousLayout) {
+    const { active: prevActive = 0, "data-path": dataPath, path: prevPath = dataPath, id: prevId, style: prevStyle } = getProps(previousLayout);
+    const prevMatch = typeOf(previousLayout) === type && path === prevPath;
+    const id = prevMatch ? prevId : props.id ?? uuid();
+    const active = "Stack" === type ? props.active ?? prevActive : void 0;
+    const key = id;
+    const style = prevMatch ? prevStyle : getStyle(type, props, parentType);
+    return isLayoutComponent(type) ? {
+        id,
+        key,
+        path,
+        style,
+        type,
+        active
+    } : {
+        id,
+        key,
+        style,
+        "data-path": path
+    };
+}
+function getChildLayoutProps(type, props, path, parentType = null, previousLayout) {
+    const layoutProps = getLayoutProps(type, props, path, parentType, previousLayout);
+    if (props.layout && !previousLayout) return [
+        layoutProps,
+        [
+            layoutFromJson(props.layout, `${path}.0`)
+        ]
+    ];
+    const previousChildren = previousLayout?.children ?? previousLayout?.props?.children;
+    const hasDynamicChildren = props.dropTarget && previousChildren;
+    const children = hasDynamicChildren ? previousChildren : getLayoutChildren(type, props.children, path, previousChildren);
+    return [
+        layoutProps,
+        children
+    ];
+}
+function getLayoutChildren(type, children, path = "0", previousChildren) {
+    const kids = Array.isArray(children) ? children : react.isValidElement(children) ? [
+        children
+    ] : [];
+    return isContainer(type) ? kids.map((child, i)=>{
+        const childType = typeOf(child);
+        const previousType = typeOf(previousChildren?.[i]);
+        if (!previousType || childType === previousType) {
+            const [layoutProps, children] = getChildLayoutProps(childType, child.props, `${path}.${i}`, type, previousChildren?.[i]);
+            return react.cloneElement(child, layoutProps, children);
+        }
+        return previousChildren?.[i];
+    }) : children;
+}
+const getStyle = (type, props, parentType)=>{
+    let { style = theKidHasNoStyle } = props;
+    if ("Flexbox" === type) style = {
+        flexDirection: props.column ? "column" : "row",
+        ...style,
+        display: "flex"
+    };
+    if (style.flex) {
+        const { flex, ...otherStyles } = style;
+        style = {
+            ...otherStyles,
+            ...expandFlex("number" == typeof flex ? flex : 0)
+        };
+    } else if ("Stack" === parentType) style = {
+        ...style,
+        ...expandFlex(1)
+    };
+    else if ("Flexbox" === parentType && (style.width || style.height) && void 0 === style.flexBasis) style = {
+        ...style,
+        flexBasis: "auto",
+        flexGrow: 0,
+        flexShrink: 0
+    };
+    return style;
+};
+function layoutFromJson({ active, id = uuid(), type, children, props, state }, path) {
+    const componentType = type.match(/^[a-z]/) ? type : getLayoutComponent(type);
+    if (void 0 === componentType) throw Error(`layoutUtils unable to create component from JSON, unknown type ${type}`);
+    if (state) setPersistentState(id, state);
+    return react.createElement(componentType, {
+        active,
+        id,
+        ...props,
+        key: id,
+        path
+    }, children ? children.map((child, i)=>layoutFromJson(child, `${path}.${i}`)) : void 0);
+}
+function layoutToJSON(component) {
+    return componentToJson(component);
+}
+function componentToJson(component) {
+    const type = typeOf(component);
+    const { id, children, type: _omit, ...props } = getProps(component);
+    const state = hasPersistentState(id) ? getPersistentState(id) : void 0;
+    return {
+        id,
+        type,
+        props: serializeProps(props),
+        state,
+        children: react.Children.map(children, componentToJson)
+    };
+}
+function serializeProps(props) {
+    if (props) {
+        const { path, ...otherProps } = props;
+        const result = {};
+        for (const [key, value] of Object.entries(otherProps))result[key] = serializeValue(value);
+        return result;
+    }
+}
+function serializeValue(value) {
+    if ("string" == typeof value || "number" == typeof value || "boolean" == typeof value) return value;
+    if (Array.isArray(value)) return value.map(serializeValue);
+    if ("object" == typeof value && null !== value) {
+        const result = {};
+        for (const [k, v] of Object.entries(value))result[k] = serializeValue(v);
+        return result;
+    }
+}
+const layoutQuery = (query, path, layoutRoot)=>{
+    if (path && layoutRoot) {
+        const parentElement = followPathToParent(layoutRoot, path);
+        if (parentElement) {
+            const { id: parentContainerId } = getProps(parentElement);
+            const parentContainerType = typeOf(parentElement);
+            return {
+                parentContainerId,
+                parentContainerType
+            };
+        }
+        return {
+            parentContainerType: "Stack",
+            parentContainerId: "blah"
+        };
+    }
+};
+const getDefaultTabLabel = (component, tabIndex, existingLabels = [])=>{
+    let label = component.props?.title ?? component.props?.["data-tab-title"] ?? existingLabels[tabIndex];
+    if (label) return label;
+    {
+        let count = tabIndex;
+        do label = `Tab ${++count}`;
+        while (existingLabels.includes(label))
+        return label;
+    }
+};
+export { applyLayout, applyLayoutProps, cloneElementAddLayoutProps, componentToJson, getDefaultTabLabel, getManagedDimension, layoutFromJson, layoutQuery, layoutToJSON, serializeProps };

package/src/layout-reducer/move-layout-element.js

@@ -0,0 +1,18 @@
+import { cloneElement } from "react";
+import { followPath, getProps } from "../utils/index.js";
+import { swapChild } from "./replace-layout-element.js";
+function moveChild(layoutRoot, { fromIndex, path, toIndex }) {
+    const target = followPath(layoutRoot, path, true);
+    const { children } = getProps(target);
+    const replacementChildren = moveChildWithinChildren(children, fromIndex, toIndex);
+    const replacement = cloneElement(target, void 0, replacementChildren);
+    return swapChild(layoutRoot, target, replacement);
+}
+function moveChildWithinChildren(children, fromIndex, toIndex) {
+    const newChildren = children.slice();
+    const [child] = newChildren.splice(fromIndex, 1);
+    if (-1 === toIndex) return newChildren.concat(child);
+    newChildren.splice(toIndex, 0, child);
+    return newChildren;
+}
+export { moveChild };