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

package/cjs/layout-reducer/flexUtils.js

@@ -0,0 +1,227 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var pathUtils = require('../utils/pathUtils.js');
+var propUtils = require('../utils/propUtils.js');
+
+const placeHolderProps = { "data-placeholder": true, "data-resizeable": true };
+const NO_STYLE = {};
+const auto = "auto";
+const defaultFlexStyle = {
+  flexBasis: 0,
+  flexGrow: 1,
+  flexShrink: 1,
+  height: auto,
+  width: auto
+};
+const CROSS_DIMENSION = {
+  height: "width",
+  width: "height"
+};
+const getFlexDimensions = (flexDirection = "row") => {
+  if (flexDirection === "row") {
+    return ["width", "height", "column"];
+  } else {
+    return ["height", "width", "row"];
+  }
+};
+const isPercentageSize = (value) => typeof value === "string" && value.endsWith("%");
+const getIntrinsicSize = (component) => {
+  const { style: { width = auto, height = auto } = NO_STYLE } = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    component.props
+  );
+  const numHeight = typeof height === "number";
+  const numWidth = typeof width === "number";
+  if (numHeight && numWidth) {
+    return { height, width };
+  } else if (numHeight) {
+    return { height };
+  } else if (numWidth) {
+    return { width };
+  } else {
+    return void 0;
+  }
+};
+function getFlexStyle(component, dimension2, pos) {
+  const crossDimension = CROSS_DIMENSION[dimension2];
+  const {
+    style: {
+      [crossDimension]: intrinsicCrossSize = auto,
+      ...intrinsicStyles
+    } = NO_STYLE
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } = component.props;
+  if (pos && pos[dimension2]) {
+    return {
+      ...intrinsicStyles,
+      ...defaultFlexStyle,
+      flexBasis: pos[dimension2],
+      flexGrow: 0,
+      flexShrink: 0
+    };
+  } else {
+    return {
+      ...intrinsicStyles,
+      ...defaultFlexStyle,
+      [crossDimension]: intrinsicCrossSize
+    };
+  }
+}
+function hasUnboundedFlexStyle(component) {
+  const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    component.props
+  );
+  if (typeof flex === "number") {
+    return true;
+  }
+  if (flexBasis === 0 && flexGrow === 1 && flexShrink === 1) {
+    return true;
+  }
+  if (typeof flexBasis === "number") {
+    return false;
+  }
+  return true;
+}
+function getFlexOrIntrinsicStyle(component, dimension2, pos) {
+  const crossDimension = CROSS_DIMENSION[dimension2];
+  const {
+    style: {
+      [dimension2]: intrinsicSize = auto,
+      [crossDimension]: intrinsicCrossSize = auto,
+      ...intrinsicStyles
+    } = NO_STYLE
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } = component.props;
+  if (intrinsicSize !== auto) {
+    if (isPercentageSize(intrinsicSize)) {
+      return {
+        flexBasis: 0,
+        flexGrow: 1,
+        flexShrink: 1,
+        [dimension2]: void 0,
+        [crossDimension]: intrinsicCrossSize
+      };
+    }
+    return {
+      flexBasis: intrinsicSize,
+      flexGrow: 0,
+      flexShrink: 0,
+      [dimension2]: intrinsicSize,
+      [crossDimension]: intrinsicCrossSize
+    };
+  }
+  if (pos && pos[dimension2]) {
+    return {
+      ...intrinsicStyles,
+      ...defaultFlexStyle,
+      flexBasis: pos[dimension2],
+      flexGrow: 0,
+      flexShrink: 0
+    };
+  }
+  return {
+    ...intrinsicStyles,
+    [crossDimension]: intrinsicCrossSize
+  };
+}
+function wrapIntrinsicSizeComponentWithFlexbox(component, flexDirection, path, clientRect, dropRect) {
+  const wrappedChildren = [];
+  let pathIndex = 0;
+  let endPlaceholder;
+  if (clientRect && dropRect) {
+    let startPlaceholder;
+    const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;
+    [startPlaceholder, endPlaceholder] = flexDirection === "column" ? [dropTop - clientRect.top, clientRect.bottom - dropBottom] : [dropLeft - clientRect.left, clientRect.right - dropRight];
+    if (startPlaceholder) {
+      wrappedChildren.push(
+        createPlaceHolder(`${path}.${pathIndex++}`, startPlaceholder, {
+          flexGrow: 0,
+          flexShrink: 0
+        })
+      );
+    }
+  } else {
+    endPlaceholder = true;
+  }
+  const { version = 0, style } = propUtils.getProps(component);
+  wrappedChildren.push(
+    pathUtils.resetPath(component, `${path}.${pathIndex++}`, {
+      version: version + 1,
+      style: {
+        ...style,
+        flexBasis: "auto",
+        flexGrow: 0,
+        flexShrink: 0
+      }
+    })
+  );
+  if (endPlaceholder) {
+    wrappedChildren.push(
+      createPlaceHolder(`${path}.${pathIndex++}`, 0, void 0, {
+        [`data-${flexDirection}-placeholder`]: true
+      })
+    );
+  }
+  return createFlexbox(
+    flexDirection,
+    { resizeable: false, style: { flexBasis: "auto" } },
+    wrappedChildren,
+    path
+  );
+}
+const getFlexValue = (flexBasis, flexFill) => {
+  if (flexFill) {
+    return void 0;
+  }
+  return flexBasis === 0 ? 1 : 0;
+};
+function createFlexbox(flexDirection, props, children, path) {
+  const id = vuuUtils.uuid();
+  const { flexFill, style, resizeable = true } = props;
+  const { flexBasis = flexFill ? void 0 : "auto" } = style;
+  const flex = getFlexValue(flexBasis, flexFill);
+  const FlexboxLayout = vuuUtils.getLayoutComponent("Flexbox");
+  return React.createElement(
+    FlexboxLayout,
+    {
+      id,
+      key: id,
+      path,
+      flexFill,
+      style: {
+        ...style,
+        flexDirection,
+        flexBasis,
+        flexGrow: flex,
+        flexShrink: flex
+      },
+      resizeable
+    },
+    children
+  );
+}
+const baseStyle = { flexGrow: 1, flexShrink: 1 };
+function createPlaceHolder(path, size, style, props) {
+  const id = vuuUtils.uuid();
+  return React.createElement("div", {
+    ...placeHolderProps,
+    ...props,
+    "data-path": path,
+    id,
+    key: id,
+    style: { ...baseStyle, ...style, flexBasis: size }
+  });
+}
+
+exports.createFlexbox = createFlexbox;
+exports.createPlaceHolder = createPlaceHolder;
+exports.getFlexDimensions = getFlexDimensions;
+exports.getFlexOrIntrinsicStyle = getFlexOrIntrinsicStyle;
+exports.getFlexStyle = getFlexStyle;
+exports.getIntrinsicSize = getIntrinsicSize;
+exports.hasUnboundedFlexStyle = hasUnboundedFlexStyle;
+exports.wrapIntrinsicSizeComponentWithFlexbox = wrapIntrinsicSizeComponentWithFlexbox;
+//# sourceMappingURL=flexUtils.js.map

package/cjs/layout-reducer/flexUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexUtils.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/flexUtils.ts"],"sourcesContent":["import {\n  dimension,\n  getLayoutComponent,\n  rect,\n  rectTuple,\n  uuid,\n} from \"@vuu-ui/vuu-utils\";\nimport React, { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { DropPos } from \"../drag-drop/dragDropTypes\";\nimport { getProps, resetPath } from \"../utils\";\nconst placeHolderProps = { \"data-placeholder\": true, \"data-resizeable\": true };\n\nconst NO_STYLE = {};\nconst auto = \"auto\";\nconst defaultFlexStyle = {\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 1,\n  height: auto,\n  width: auto,\n};\n\nconst CROSS_DIMENSION = {\n  height: \"width\",\n  width: \"height\",\n};\n\nexport type flexDirection = \"row\" | \"column\";\n\ntype contraDimension = dimension;\ntype flexDimensionTuple = [dimension, contraDimension, flexDirection];\nexport type position = {\n  height?: number;\n  width?: number;\n};\n\nexport const getFlexDimensions = (flexDirection: flexDirection = \"row\") => {\n  if (flexDirection === \"row\") {\n    return [\"width\", \"height\", \"column\"] as flexDimensionTuple;\n  } else {\n    return [\"height\", \"width\", \"row\"] as flexDimensionTuple;\n  }\n};\n\nconst isPercentageSize = (value: string | number) =>\n  typeof value === \"string\" && value.endsWith(\"%\");\n\nexport const getIntrinsicSize = (\n  component: ReactElement,\n): { height?: number; width?: number } | undefined => {\n  const { style: { width = auto, height = auto } = NO_STYLE } =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    component.props as any;\n\n  const numHeight = typeof height === \"number\";\n  const numWidth = typeof width === \"number\";\n\n  if (numHeight && numWidth) {\n    return { height, width };\n  } else if (numHeight) {\n    return { height };\n  } else if (numWidth) {\n    return { width };\n  } else {\n    return undefined;\n  }\n};\n\nexport function getFlexStyle(\n  component: ReactElement,\n  dimension: dimension,\n  pos?: DropPos,\n) {\n  const crossDimension = CROSS_DIMENSION[dimension];\n  const {\n    style: {\n      [crossDimension]: intrinsicCrossSize = auto,\n      ...intrinsicStyles\n    } = NO_STYLE,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  } = component.props as any;\n\n  if (pos && pos[dimension]) {\n    return {\n      ...intrinsicStyles,\n      ...defaultFlexStyle,\n      flexBasis: pos[dimension],\n      flexGrow: 0,\n      flexShrink: 0,\n    };\n  } else {\n    return {\n      ...intrinsicStyles,\n      ...defaultFlexStyle,\n      [crossDimension]: intrinsicCrossSize,\n    };\n  }\n}\n\nexport function hasUnboundedFlexStyle(component: ReactElement) {\n  const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    component.props as any;\n  if (typeof flex === \"number\") {\n    return true;\n  }\n  if (flexBasis === 0 && flexGrow === 1 && flexShrink === 1) {\n    return true;\n  }\n  if (typeof flexBasis === \"number\") {\n    return false;\n  }\n  return true;\n}\n\nexport function getFlexOrIntrinsicStyle(\n  component: ReactElement,\n  dimension: dimension,\n  pos: position,\n) {\n  const crossDimension = CROSS_DIMENSION[dimension];\n  const {\n    style: {\n      [dimension]: intrinsicSize = auto,\n      [crossDimension]: intrinsicCrossSize = auto,\n      ...intrinsicStyles\n    } = NO_STYLE,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  } = component.props as any;\n\n  if (intrinsicSize !== auto) {\n    if (isPercentageSize(intrinsicSize)) {\n      return {\n        flexBasis: 0,\n        flexGrow: 1,\n        flexShrink: 1,\n        [dimension]: undefined,\n        [crossDimension]: intrinsicCrossSize,\n      };\n    }\n    return {\n      flexBasis: intrinsicSize,\n      flexGrow: 0,\n      flexShrink: 0,\n      [dimension]: intrinsicSize,\n      [crossDimension]: intrinsicCrossSize,\n    };\n  }\n  if (pos && pos[dimension]) {\n    return {\n      ...intrinsicStyles,\n      ...defaultFlexStyle,\n      flexBasis: pos[dimension],\n      flexGrow: 0,\n      flexShrink: 0,\n    };\n  }\n  return {\n    ...intrinsicStyles,\n    [crossDimension]: intrinsicCrossSize,\n  };\n}\n\nexport function wrapIntrinsicSizeComponentWithFlexbox(\n  component: ReactElement,\n  flexDirection: flexDirection,\n  path: string,\n  clientRect?: rect,\n  dropRect?: rectTuple,\n) {\n  const wrappedChildren = [];\n  let pathIndex = 0;\n  let endPlaceholder;\n\n  if (clientRect && dropRect) {\n    let startPlaceholder;\n    const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;\n    [startPlaceholder, endPlaceholder] =\n      flexDirection === \"column\"\n        ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]\n        : [dropLeft - clientRect.left, clientRect.right - dropRight];\n\n    if (startPlaceholder) {\n      wrappedChildren.push(\n        createPlaceHolder(`${path}.${pathIndex++}`, startPlaceholder, {\n          flexGrow: 0,\n          flexShrink: 0,\n        }),\n      );\n    }\n  } else {\n    endPlaceholder = true;\n  }\n\n  const { version = 0, style } = getProps(component);\n\n  wrappedChildren.push(\n    resetPath(component, `${path}.${pathIndex++}`, {\n      version: version + 1,\n      style: {\n        ...style,\n        flexBasis: \"auto\",\n        flexGrow: 0,\n        flexShrink: 0,\n      },\n    }),\n  );\n\n  if (endPlaceholder) {\n    wrappedChildren.push(\n      createPlaceHolder(`${path}.${pathIndex++}`, 0, undefined, {\n        [`data-${flexDirection}-placeholder`]: true,\n      }),\n    );\n  }\n\n  return createFlexbox(\n    flexDirection,\n    { resizeable: false, style: { flexBasis: \"auto\" } },\n    wrappedChildren,\n    path,\n  );\n}\n\nconst getFlexValue = (\n  flexBasis: number,\n  flexFill: boolean,\n): number | undefined => {\n  if (flexFill) {\n    return undefined;\n  }\n  return flexBasis === 0 ? 1 : 0;\n};\n\nexport function createFlexbox(\n  flexDirection: flexDirection,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  props: any,\n  children: ReactNode,\n  path: string,\n) {\n  const id = uuid();\n  const { flexFill, style, resizeable = true } = props;\n  const { flexBasis = flexFill ? undefined : \"auto\" } = style;\n  const flex = getFlexValue(flexBasis, flexFill);\n  // A direct import triggers a circular ref chain\n  const FlexboxLayout = getLayoutComponent(\"Flexbox\");\n  return React.createElement(\n    FlexboxLayout,\n    {\n      id,\n      key: id,\n      path,\n      flexFill,\n      style: {\n        ...style,\n        flexDirection,\n        flexBasis,\n        flexGrow: flex,\n        flexShrink: flex,\n      },\n      resizeable,\n    },\n    children,\n  );\n}\n\nconst baseStyle = { flexGrow: 1, flexShrink: 1 };\n\nexport function createPlaceHolder(\n  path: string,\n  size: number,\n  style?: CSSProperties,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  props?: any,\n) {\n  const id = uuid();\n  return React.createElement(\"div\", {\n    ...placeHolderProps,\n    ...props,\n    \"data-path\": path,\n    id,\n    key: id,\n    style: { ...baseStyle, ...style, flexBasis: size },\n  });\n}\n"],"names":["dimension","getProps","resetPath","uuid","getLayoutComponent"],"mappings":"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"}

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

@@ -0,0 +1,286 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var pathUtils = require('../utils/pathUtils.js');
+var propUtils = require('../utils/propUtils.js');
+var typeOf = require('../utils/typeOf.js');
+var flexUtils = require('./flexUtils.js');
+var layoutUtils = require('./layoutUtils.js');
+
+function getInsertTabBeforeAfter(stack, pos) {
+  const { children: tabs } = stack.props;
+  const tabCount = tabs.length;
+  const { index = -1, positionRelativeToTab = "after" } = pos.tab || {};
+  return index === -1 || index >= tabCount ? [tabs[tabCount - 1], "after"] : [tabs[index] ?? null, positionRelativeToTab];
+}
+function insertIntoContainer(container, targetContainer, newComponent) {
+  const {
+    active: containerActive,
+    children: containerChildren = [],
+    path: containerPath
+  } = propUtils.getProps(container);
+  const existingComponentPath = propUtils.getProp(targetContainer, "path");
+  const { idx, finalStep } = pathUtils.nextStep(
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    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 = typeOf.typeOf(container) === "Stack" ? Array.isArray(insertedIdx) ? insertedIdx[0] : insertedIdx : containerActive;
+  return React.cloneElement(container, { active }, children);
+}
+const getDefaultTitle = (containerType, component, index, existingLabels) => containerType === "Stack" ? layoutUtils.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 = propUtils.getProp(container, "path");
+  const count = containerChildren?.length;
+  const {
+    id = vuuUtils.uuid(),
+    title = getDefaultTitle(
+      typeOf.typeOf(container),
+      newComponent,
+      count ?? 0,
+      getChildrenTitles(containerChildren)
+    )
+  } = propUtils.getProps(newComponent);
+  if (count) {
+    return [
+      count,
+      containerChildren.concat(
+        pathUtils.resetPath(newComponent, `${containerPath}.${count}`, {
+          id,
+          key: id,
+          title
+        })
+      )
+    ];
+  } else {
+    return [0, [pathUtils.resetPath(newComponent, `${containerPath}.0`, { id, title })]];
+  }
+}
+function insertBesideChild(container, existingComponent, newComponent, insertionPosition, pos, clientRect, dropRect) {
+  const {
+    active: containerActive,
+    children: containerChildren,
+    path: containerPath
+  } = propUtils.getProps(container);
+  const existingComponentPath = propUtils.getProp(existingComponent, "path");
+  const { idx, finalStep } = pathUtils.nextStep(containerPath, existingComponentPath);
+  const [insertedIdx, children] = finalStep ? updateChildren(
+    container,
+    containerChildren,
+    idx,
+    newComponent,
+    insertionPosition,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    pos,
+    clientRect,
+    dropRect
+  ) : [
+    containerActive,
+    containerChildren.map(
+      (child, index) => index === idx ? insertBesideChild(
+        child,
+        existingComponent,
+        newComponent,
+        insertionPosition,
+        pos,
+        clientRect,
+        dropRect
+      ) : child
+    )
+  ];
+  const active = typeOf.typeOf(container) === "Stack" ? insertedIdx : containerActive;
+  return React.cloneElement(container, { active }, children);
+}
+function updateChildren(container, containerChildren, idx, newComponent, insertionPosition, pos, clientRect, dropRect) {
+  const intrinsicSize = flexUtils.getIntrinsicSize(newComponent);
+  if (intrinsicSize?.width && intrinsicSize?.height) {
+    return insertIntrinsicSizedComponent(
+      container,
+      containerChildren,
+      idx,
+      newComponent,
+      insertionPosition,
+      clientRect,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      dropRect
+    );
+  } else {
+    return insertFlexComponent(
+      container,
+      containerChildren,
+      idx,
+      newComponent,
+      insertionPosition,
+      pos?.width || pos?.height,
+      clientRect
+    );
+  }
+}
+const getLeadingPlaceholderSize = (flexDirection2, insertionPosition, { top, right, bottom, left }, [rectLeft, rectTop, rectRight, rectBottom]) => {
+  if (flexDirection2 === "column" && insertionPosition === "before") {
+    return rectTop - top;
+  } else if (flexDirection2 === "column") {
+    return bottom - rectBottom;
+  } else if (flexDirection2 === "row" && insertionPosition === "before") {
+    return rectLeft - left;
+  } else if (flexDirection2 === "row") {
+    return right - rectRight;
+  }
+};
+function insertIntrinsicSizedComponent(container, containerChildren, idx, newComponent, insertionPosition, clientRect, dropRect) {
+  const {
+    style: { flexDirection: flexDirection2 }
+  } = propUtils.getProps(container);
+  const [dimension, crossDimension, contraDirection] = flexUtils.getFlexDimensions(flexDirection2);
+  const { [crossDimension]: intrinsicCrossSize, [dimension]: intrinsicSize } = flexUtils.getIntrinsicSize(newComponent);
+  const path = propUtils.getProp(containerChildren[idx], "path");
+  const placeholderSize = getLeadingPlaceholderSize(
+    flexDirection2,
+    insertionPosition,
+    clientRect,
+    dropRect
+  );
+  const [itemToInsert, size] = intrinsicCrossSize < clientRect[crossDimension] ? [
+    flexUtils.wrapIntrinsicSizeComponentWithFlexbox(
+      newComponent,
+      contraDirection,
+      path,
+      clientRect,
+      dropRect
+    ),
+    intrinsicSize
+  ] : [newComponent, void 0];
+  const placeholder = placeholderSize ? flexUtils.createPlaceHolder(path, placeholderSize, { flexGrow: 0, flexShrink: 0 }) : void 0;
+  if (intrinsicCrossSize > clientRect[crossDimension]) {
+    containerChildren = containerChildren.map((child) => {
+      if (propUtils.getProp(child, "placeholder")) {
+        return child;
+      } else {
+        const { [crossDimension]: intrinsicCrossChildSize } = flexUtils.getIntrinsicSize(
+          child
+        );
+        if (intrinsicCrossChildSize && intrinsicCrossChildSize < intrinsicCrossSize) {
+          return flexUtils.wrapIntrinsicSizeComponentWithFlexbox(
+            child,
+            contraDirection,
+            propUtils.getProp(child, "path")
+          );
+        } else {
+          return child;
+        }
+      }
+    });
+  }
+  return insertFlexComponent(
+    container,
+    containerChildren,
+    idx,
+    itemToInsert,
+    insertionPosition,
+    size,
+    clientRect,
+    placeholder
+  );
+}
+function insertFlexComponent(container, containerChildren, idx, newComponent, insertionPosition, size, targetRect, placeholder) {
+  const containerPath = propUtils.getProp(container, "path");
+  let insertedIdx = 0;
+  const children = !containerChildren || containerChildren.length === 0 ? [newComponent] : containerChildren.reduce((arr, child, i) => {
+    if (idx === i) {
+      const [existingComponent, insertedComponent] = getStyledComponents(container, child, newComponent, targetRect);
+      if (insertionPosition === "before") {
+        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 : pathUtils.resetPath(child, `${containerPath}.${i}`)
+  );
+  return [insertedIdx, children];
+}
+function getStyledComponents(container, existingComponent, newComponent, targetRect) {
+  const id = vuuUtils.uuid();
+  let { version = 0 } = propUtils.getProps(newComponent);
+  version += 1;
+  if (typeOf.typeOf(container) === "Flexbox") {
+    const { style: containerStyle } = container.props;
+    const [dim] = layoutUtils.getManagedDimension(containerStyle);
+    const splitterSize = 6;
+    const size = { [dim]: (targetRect[dim] - splitterSize) / 2 };
+    const existingComponentStyle = flexUtils.getFlexOrIntrinsicStyle(
+      existingComponent,
+      dim,
+      size
+    );
+    const newComponentStyle = flexUtils.getFlexOrIntrinsicStyle(newComponent, dim, size);
+    return [
+      React.cloneElement(existingComponent, {
+        style: existingComponentStyle
+      }),
+      React.cloneElement(newComponent, {
+        id,
+        version,
+        style: newComponentStyle
+      })
+    ];
+  } else {
+    const {
+      style: { left: _1, top: _2, flex: _3, ...style } = {
+        left: void 0,
+        top: void 0,
+        flex: void 0
+      }
+    } = propUtils.getProps(newComponent);
+    return [
+      existingComponent,
+      React.cloneElement(newComponent, {
+        id,
+        version,
+        style: { ...style, flex: "1 1 0px" }
+      })
+    ];
+  }
+}
+
+exports.getInsertTabBeforeAfter = getInsertTabBeforeAfter;
+exports.insertBesideChild = insertBesideChild;
+exports.insertIntoContainer = insertIntoContainer;
+//# sourceMappingURL=insert-layout-element.js.map

package/cjs/layout-reducer/insert-layout-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-layout-element.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/insert-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { LayoutModel, rectTuple, uuid } from \"@vuu-ui/vuu-utils\";\nimport React, { ReactElement } from \"react\";\nimport { DropPos } from \"../drag-drop\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { getProp, getProps, nextStep, resetPath, typeOf } from \"../utils\";\nimport {\n  createPlaceHolder,\n  flexDirection,\n  getFlexDimensions,\n  getFlexOrIntrinsicStyle,\n  getIntrinsicSize,\n  wrapIntrinsicSizeComponentWithFlexbox,\n} from \"./flexUtils\";\nimport {\n  LayoutProps,\n  getDefaultTabLabel,\n  getManagedDimension,\n} from \"./layoutUtils\";\n\ntype insertionPosition = \"before\" | \"after\";\n\nexport function getInsertTabBeforeAfter(stack: LayoutModel, pos: DropPos) {\n  const { children: tabs } = stack.props as any;\n  const tabCount = tabs.length;\n  const { index = -1, positionRelativeToTab = \"after\" } = pos.tab || {};\n  return index === -1 || index >= tabCount\n    ? [tabs[tabCount - 1], \"after\"]\n    : [tabs[index] ?? null, positionRelativeToTab];\n}\n\nexport function insertIntoContainer(\n  container: ReactElement,\n  targetContainer: ReactElement,\n  newComponent: ReactElement | ReactElement[],\n): ReactElement {\n  const {\n    active: containerActive,\n    children: containerChildren = [],\n    path: containerPath,\n  } = getProps(container) as LayoutProps;\n\n  const existingComponentPath = getProp(targetContainer, \"path\");\n  const { idx, finalStep } = nextStep(\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    containerPath!,\n    existingComponentPath,\n    true,\n  );\n  const [insertedIdx, children] = finalStep\n    ? insertIntoChildren(container, containerChildren, newComponent)\n    : [\n        containerActive,\n        containerChildren?.map((child, index) =>\n          index === idx\n            ? (insertIntoContainer(\n                child,\n                targetContainer,\n                newComponent,\n              ) as ReactElement)\n            : child,\n        ),\n      ];\n  const active =\n    typeOf(container) === \"Stack\"\n      ? Array.isArray(insertedIdx)\n        ? (insertedIdx[0] as number)\n        : insertedIdx\n      : containerActive;\n\n  return React.cloneElement(container, { active } as any, children);\n}\n\nconst getDefaultTitle = (\n  containerType: string | undefined,\n  component: ReactElement,\n  index: number,\n  existingLabels: string[],\n) =>\n  containerType === \"Stack\"\n    ? getDefaultTabLabel(component, index, existingLabels)\n    : undefined;\n\nconst getChildrenTitles = (children: ReactElement[]) =>\n  children.map((child) => (child.props as any).title);\n\nfunction insertIntoChildren(\n  container: ReactElement,\n  containerChildren: ReactElement[],\n  newComponent: ReactElement | ReactElement[],\n): [number, ReactElement[]] {\n  if (Array.isArray(newComponent)) {\n    const [firstChild, ...rest] = newComponent;\n    let [idx, children] = insertIntoChildren(\n      container,\n      containerChildren,\n      firstChild,\n    );\n    for (const child of rest) {\n      [, children] = insertIntoChildren(container, children, child);\n    }\n    return [idx, children];\n  }\n\n  const containerPath = getProp(container, \"path\");\n  const count = containerChildren?.length;\n\n  const {\n    id = uuid(),\n    title = getDefaultTitle(\n      typeOf(container),\n      newComponent,\n      count ?? 0,\n      getChildrenTitles(containerChildren),\n    ),\n  } = getProps(newComponent);\n\n  if (count) {\n    return [\n      count,\n      containerChildren.concat(\n        resetPath(newComponent, `${containerPath}.${count}`, {\n          id,\n          key: id,\n          title,\n        }),\n      ),\n    ];\n  } else {\n    return [0, [resetPath(newComponent, `${containerPath}.0`, { id, title })]];\n  }\n}\n\nexport function insertBesideChild(\n  container: ReactElement,\n  existingComponent: any,\n  newComponent: any,\n  insertionPosition: insertionPosition,\n  pos?: DropPos,\n  clientRect?: any,\n  dropRect?: any,\n): ReactElement {\n  const {\n    active: containerActive,\n    children: containerChildren,\n    path: containerPath,\n  } = getProps(container);\n\n  const existingComponentPath = getProp(existingComponent, \"path\");\n  const { idx, finalStep } = nextStep(containerPath, existingComponentPath);\n  const [insertedIdx, children] = finalStep\n    ? updateChildren(\n        container,\n        containerChildren,\n        idx,\n        newComponent,\n        insertionPosition,\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        pos!,\n        clientRect,\n        dropRect,\n      )\n    : [\n        containerActive,\n        containerChildren.map((child: ReactElement, index: number) =>\n          index === idx\n            ? insertBesideChild(\n                child,\n                existingComponent,\n                newComponent,\n                insertionPosition,\n                pos,\n                clientRect,\n                dropRect,\n              )\n            : child,\n        ),\n      ];\n\n  const active = typeOf(container) === \"Stack\" ? insertedIdx : containerActive;\n  return React.cloneElement(container, { active } as any, children);\n}\n\nfunction updateChildren(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  idx: number,\n  newComponent: ReactElement,\n  insertionPosition: insertionPosition,\n  pos: DropPos,\n  clientRect: DropTarget[\"clientRect\"],\n  dropRect: DropTarget[\"dropRect\"],\n) {\n  const intrinsicSize = getIntrinsicSize(newComponent);\n  if (intrinsicSize?.width && intrinsicSize?.height) {\n    return insertIntrinsicSizedComponent(\n      container,\n      containerChildren,\n      idx,\n      newComponent,\n      insertionPosition,\n      clientRect,\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      dropRect!,\n    );\n  } else {\n    return insertFlexComponent(\n      container,\n      containerChildren,\n      idx,\n      newComponent,\n      insertionPosition,\n      pos?.width || pos?.height,\n      clientRect,\n    );\n  }\n}\n\nconst getLeadingPlaceholderSize = (\n  flexDirection: flexDirection,\n  insertionPosition: insertionPosition,\n  { top, right, bottom, left }: DropTarget[\"clientRect\"],\n  [rectLeft, rectTop, rectRight, rectBottom]: rectTuple,\n) => {\n  if (flexDirection === \"column\" && insertionPosition === \"before\") {\n    return rectTop - top;\n  } else if (flexDirection === \"column\") {\n    return bottom - rectBottom;\n  } else if (flexDirection === \"row\" && insertionPosition === \"before\") {\n    return rectLeft - left;\n  } else if (flexDirection === \"row\") {\n    return right - rectRight;\n  }\n};\n\nfunction insertIntrinsicSizedComponent(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  idx: number,\n  newComponent: ReactElement,\n  insertionPosition: insertionPosition,\n  clientRect: DropTarget[\"clientRect\"],\n  dropRect: rectTuple,\n) {\n  const {\n    style: { flexDirection },\n  } = getProps(container);\n  const [dimension, crossDimension, contraDirection] =\n    getFlexDimensions(flexDirection);\n  const { [crossDimension]: intrinsicCrossSize, [dimension]: intrinsicSize } =\n    getIntrinsicSize(newComponent) as { height: number; width: number };\n  const path = getProp(containerChildren[idx], \"path\");\n\n  const placeholderSize = getLeadingPlaceholderSize(\n    flexDirection,\n    insertionPosition,\n    clientRect,\n    dropRect,\n  );\n\n  const [itemToInsert, size] =\n    intrinsicCrossSize < clientRect[crossDimension]\n      ? [\n          wrapIntrinsicSizeComponentWithFlexbox(\n            newComponent,\n            contraDirection,\n            path,\n            clientRect,\n            dropRect,\n          ),\n          intrinsicSize,\n        ]\n      : [newComponent, undefined];\n\n  const placeholder = placeholderSize\n    ? createPlaceHolder(path, placeholderSize, { flexGrow: 0, flexShrink: 0 })\n    : undefined;\n\n  if (intrinsicCrossSize > clientRect[crossDimension]) {\n    containerChildren = containerChildren.map((child) => {\n      if (getProp(child, \"placeholder\")) {\n        return child;\n      } else {\n        const { [crossDimension]: intrinsicCrossChildSize } = getIntrinsicSize(\n          child,\n        ) as {\n          height: number;\n          width: number;\n        };\n        if (\n          intrinsicCrossChildSize &&\n          intrinsicCrossChildSize < intrinsicCrossSize\n        ) {\n          return wrapIntrinsicSizeComponentWithFlexbox(\n            child,\n            contraDirection,\n            getProp(child, \"path\"),\n          );\n        } else {\n          return child;\n        }\n      }\n    });\n  }\n\n  return insertFlexComponent(\n    container,\n    containerChildren,\n    idx,\n    itemToInsert,\n    insertionPosition,\n    size,\n    clientRect,\n    placeholder,\n  );\n}\n\nfunction insertFlexComponent(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  idx: number,\n  newComponent: ReactElement,\n  insertionPosition: \"before\" | \"after\",\n  size: number | undefined,\n  targetRect: DropTarget[\"clientRect\"],\n  placeholder?: ReactElement,\n) {\n  const containerPath = getProp(container, \"path\");\n  let insertedIdx = 0;\n  const children =\n    !containerChildren || containerChildren.length === 0\n      ? [newComponent]\n      : containerChildren\n          .reduce<ReactElement[]>((arr, child, i) => {\n            if (idx === i) {\n              const [existingComponent, insertedComponent] =\n                getStyledComponents(container, child, newComponent, targetRect);\n              if (insertionPosition === \"before\") {\n                if (placeholder) {\n                  arr.push(placeholder, insertedComponent, existingComponent);\n                } else {\n                  arr.push(insertedComponent, existingComponent);\n                }\n              } else {\n                if (placeholder) {\n                  arr.push(existingComponent, insertedComponent, placeholder);\n                } else {\n                  arr.push(existingComponent, insertedComponent);\n                }\n              }\n              insertedIdx = arr.indexOf(insertedComponent);\n            } else {\n              arr.push(child);\n            }\n            return arr;\n          }, [])\n          .map((child, i) =>\n            i < insertedIdx ? child : resetPath(child, `${containerPath}.${i}`),\n          );\n\n  return [insertedIdx, children];\n}\n\nfunction getStyledComponents(\n  container: LayoutModel,\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  targetRect: DropTarget[\"clientRect\"],\n): [ReactElement, ReactElement] {\n  const id = uuid();\n  let { version = 0 } = getProps(newComponent);\n  version += 1;\n  if (typeOf(container) === \"Flexbox\") {\n    const { style: containerStyle } = container.props as any;\n    const [dim] = getManagedDimension(containerStyle);\n    const splitterSize = 6;\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    const size = { [dim]: (targetRect[dim] - splitterSize) / 2 };\n    const existingComponentStyle = getFlexOrIntrinsicStyle(\n      existingComponent,\n      dim,\n      size,\n    );\n    const newComponentStyle = getFlexOrIntrinsicStyle(newComponent, dim, size);\n\n    return [\n      React.cloneElement(existingComponent, {\n        style: existingComponentStyle,\n      } as any),\n      React.cloneElement(newComponent, {\n        id,\n        version,\n        style: newComponentStyle,\n      } as any),\n    ];\n  } else {\n    const {\n      style: { left: _1, top: _2, flex: _3, ...style } = {\n        left: undefined,\n        top: undefined,\n        flex: undefined,\n      },\n    } = getProps(newComponent);\n    return [\n      existingComponent,\n      React.cloneElement(newComponent, {\n        id,\n        version,\n        style: { ...style, flex: \"1 1 0px\" },\n      } as any),\n    ];\n  }\n}\n"],"names":["getProps","getProp","nextStep","typeOf","getDefaultTabLabel","uuid","resetPath","getIntrinsicSize","flexDirection","getFlexDimensions","wrapIntrinsicSizeComponentWithFlexbox","createPlaceHolder","getManagedDimension","getFlexOrIntrinsicStyle"],"mappings":"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"}