@vuu-ui/vuu-layout 0.5.13 → 0.5.15

package/src/layout-reducer/remove-layout-element.ts

@@ -0,0 +1,226 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React, { ReactElement } from 'react';
+import { createPlaceHolder } from './flexUtils';
+import { swapChild } from './replace-layout-element';
+
+import {
+  followPath,
+  followPathToParent,
+  getProp,
+  getProps,
+  nextStep,
+  resetPath,
+  typeOf
+} from '../utils';
+import { RemoveAction } from './layoutTypes';
+
+export function removeChild(layoutRoot: ReactElement, { path }: RemoveAction) {
+  const target = followPath(layoutRoot, path!) as ReactElement;
+  let targetParent = followPathToParent(layoutRoot, path!);
+  if (targetParent === null) {
+    return layoutRoot;
+  }
+  const { children } = getProps(targetParent);
+  if (children.length > 1 && allOtherChildrenArePlaceholders(children, path)) {
+    const {
+      style: { flexBasis, display, flexDirection, ...style }
+    } = getProps(targetParent);
+    let containerPath = getProp(targetParent, 'path');
+    let newLayout = swapChild(
+      layoutRoot,
+      targetParent,
+      createPlaceHolder(containerPath, flexBasis, style)
+    );
+    while ((targetParent = followPathToParent(newLayout, containerPath))) {
+      if (getProp(targetParent, 'path') === '0') {
+        break;
+      }
+      const { children } = getProps(targetParent);
+      if (allOtherChildrenArePlaceholders(children)) {
+        containerPath = getProp(targetParent, 'path');
+        const {
+          style: { flexBasis, display, flexDirection, ...style }
+        } = getProps(targetParent);
+        newLayout = swapChild(
+          layoutRoot,
+          targetParent,
+          createPlaceHolder(containerPath, flexBasis, style)
+        );
+      } else if (hasAdjacentPlaceholders(children)) {
+        newLayout = collapsePlaceholders(layoutRoot, targetParent as ReactElement);
+      } else {
+        break;
+      }
+    }
+    return newLayout;
+  }
+  return _removeChild(layoutRoot, target);
+}
+
+function _removeChild(container: ReactElement, child: ReactElement): ReactElement {
+  const props = getProps(container)
+  const { children: componentChildren, path, preserve } = props
+  let { active } = props
+  const { idx, finalStep } = nextStep(path, getProp(child, 'path'));
+  const type = typeOf(container) as string;
+  let children = componentChildren.slice() as ReactElement[];
+  
+  if (finalStep) {
+    children.splice(idx, 1);
+    if (active !== undefined && active >= idx) {
+      active = Math.max(0, active - 1);
+    }
+
+    if (children.length === 1 && !preserve && path !== '0' && type.match(/Flexbox|Stack/)) {
+      return unwrap(container, children[0]);
+    }
+
+    if (!children.some(isFlexible) && children.some(canBeMadeFlexible)) {
+      children = makeFlexible(children);
+    }
+  } else {
+    children[idx] = _removeChild(children[idx], child) as ReactElement;
+  }
+
+  children = children.map((child, i) => resetPath(child, `${path}.${i}`));
+  return React.cloneElement(container, { active }, children);
+}
+
+function unwrap(container: ReactElement, child: ReactElement) {
+  const type = typeOf(container);
+  const {
+    path,
+    style: { flexBasis, flexGrow, flexShrink, width, height }
+  } = getProps(container);
+
+  let unwrappedChild = resetPath(child, path);
+  if (path === '0') {
+    unwrappedChild = React.cloneElement(unwrappedChild, {
+      style: {
+        ...child.props.style,
+        width,
+        height
+      }
+    });
+  } else if (type === 'Flexbox') {
+    const dim = container.props.style.flexDirection === 'column' ? 'height' : 'width';
+    const {
+      style: { [dim]: size, ...style }
+    } = unwrappedChild.props;
+    unwrappedChild = React.cloneElement(unwrappedChild, {
+      flexFill: undefined,
+      style: {
+        ...style,
+        flexGrow,
+        flexShrink,
+        flexBasis,
+        width,
+        height
+      }
+    });
+  }
+  return unwrappedChild;
+}
+
+const isFlexible = (element: ReactElement) => {
+  return element.props.style.flexGrow > 0;
+}
+
+const canBeMadeFlexible = (element: ReactElement) => {
+  const { width, height, flexGrow } = element.props.style;
+  return flexGrow === 0 && typeof width !== 'number' && typeof height !== 'number';
+}
+
+const makeFlexible = (children: ReactElement[]) => {
+  return children.map((child) =>
+    canBeMadeFlexible(child)
+      ? React.cloneElement(child, {
+          style: {
+            ...child.props.style,
+            flexGrow: 1
+          }
+        })
+      : child
+  );
+}
+
+const hasAdjacentPlaceholders = (children: ReactElement[]) => {
+  if (children && children.length > 0) {
+    let wasPlaceholder = getProp(children[0], 'placeholder');
+    let isPlaceholder = false;
+    for (let i = 1; i < children.length; i++) {
+      isPlaceholder = getProp(children[i], 'placeholder');
+      if (wasPlaceholder && isPlaceholder) {
+        return true;
+      }
+      wasPlaceholder = isPlaceholder;
+    }
+  }
+};
+
+const collapsePlaceholders = (container: ReactElement, target: ReactElement) => {
+  const { children: componentChildren, path } = getProps(container);
+  const { idx, finalStep } = nextStep(path, getProp(target, 'path'));
+  let children = componentChildren.slice() as ReactElement[];
+  if (finalStep) {
+    children[idx] = _collapsePlaceHolders(target);
+  } else {
+    children[idx] = collapsePlaceholders(children[idx], target) as ReactElement;
+  }
+
+  children = children.map((child, i) => resetPath(child, `${path}.${i}`));
+  return React.cloneElement(container, undefined, children);
+};
+
+const _collapsePlaceHolders = (container: ReactElement) => {
+  const { children } = getProps(container);
+  const newChildren = [];
+  const placeholders: ReactElement[] = [];
+
+  for (let i = 0; i < children.length; i++) {
+    if (getProp(children[i], 'placeholder')) {
+      placeholders.push(children[i]);
+    } else {
+      if (placeholders.length === 1) {
+        newChildren.push(placeholders.pop());
+      } else if (placeholders.length > 0) {
+        newChildren.push(mergePlaceholders(placeholders));
+        placeholders.length = 0;
+      }
+      newChildren.push(children[i]);
+    }
+  }
+
+  if (placeholders.length === 1) {
+    newChildren.push(placeholders.pop());
+  } else if (placeholders.length > 0) {
+    newChildren.push(mergePlaceholders(placeholders));
+  }
+
+  const containerPath = getProp(container, 'path');
+  return React.cloneElement(
+    container,
+    undefined,
+    newChildren.map((child, i) => resetPath(child, `${containerPath}.${i}`))
+  );
+};
+
+const mergePlaceholders = ([placeholder, ...placeholders]: ReactElement[]) => {
+  const targetStyle = getProp(placeholder, 'style');
+  let { flexBasis, flexGrow, flexShrink } = targetStyle;
+  for (const {
+    props: { style }
+  } of placeholders) {
+    flexBasis += style.flexBasis;
+    flexGrow = Math.max(flexGrow, style.flexGrow);
+    flexShrink = Math.max(flexShrink, style.flexShrink);
+  }
+  return React.cloneElement(placeholder, {
+    style: { ...targetStyle, flexBasis, flexGrow, flexShrink }
+  });
+};
+
+const allOtherChildrenArePlaceholders = (children: ReactElement[], path?: string) =>
+  children.every(
+    (child) => getProp(child, 'placeholder') || (path && getProp(child, 'path') === path)
+  );

package/src/layout-reducer/replace-layout-element.ts

@@ -0,0 +1,113 @@
+import React, { ReactElement } from 'react';
+import { Action } from '../layout-action';
+import { getProp, getProps, nextStep } from '../utils';
+import { ReplaceAction } from './layoutTypes';
+import { applyLayoutProps, LayoutProps } from './layoutUtils';
+
+export function replaceChild(model: ReactElement, { target, replacement }: ReplaceAction) {
+  return _replaceChild(model, target, replacement);
+}
+
+export function _replaceChild(
+  model: ReactElement,
+  child: ReactElement,
+  replacement: ReactElement<LayoutProps>
+) {
+  const path = getProp(child, 'path');
+  const resizeable = getProp(child, 'resizeable');
+  const { style } = getProps(child);
+  const newChild =
+    applyLayoutProps(
+      React.cloneElement(replacement, {
+        resizeable,
+        style: {
+          ...style,
+          ...replacement.props.style
+        }
+      }),
+      path
+    );
+
+  return swapChild(model, child, newChild);
+}
+
+export function swapChild(
+  model: ReactElement,
+  child: ReactElement,
+  replacement: ReactElement,
+  op?: 'maximize' | 'minimize' | 'restore'
+): ReactElement {
+  if (model === child) {
+    return replacement;
+  }
+  
+  const { idx, finalStep } = nextStep(getProp(model, 'path'), getProp(child, 'path'));
+  const children = model.props.children.slice();
+  
+  if (finalStep) {
+    if (!op) {
+      children[idx] = replacement;
+    } else if (op === Action.MINIMIZE) {
+      children[idx] = minimize(model, children[idx]);
+    } else if (op === Action.RESTORE) {
+      children[idx] = restore(children[idx]);
+    }
+  } else {
+    children[idx] = swapChild(children[idx], child, replacement, op);
+  }
+  return React.cloneElement(model, undefined, children);
+}
+
+function minimize(parent: ReactElement, child: ReactElement) {
+  const { style: parentStyle } = getProps(parent);
+  const { style: childStyle } = getProps(child);
+
+  const { width, height, flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+
+  const restoreStyle = {
+    width,
+    height,
+    flexBasis,
+    flexShrink,
+    flexGrow
+  };
+
+  const style = {
+    ...rest,
+    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0
+  };
+  const collapsed =
+    parentStyle.flexDirection === 'row'
+      ? 'vertical'
+      : parentStyle.flexDirection === 'column'
+      ? 'horizontal'
+      : false;
+
+  if (collapsed) {
+    return React.cloneElement(child, {
+      collapsed,
+      restoreStyle,
+      style
+    });
+  }
+  return child;
+}
+
+function restore(child: ReactElement) {
+  const { style: childStyle, restoreStyle } = getProps(child);
+
+  const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+
+  const style = {
+    ...rest,
+    ...restoreStyle
+  };
+
+  return React.cloneElement(child, {
+    collapsed: false,
+    style,
+    restoreStyle: undefined
+  });
+}

package/src/layout-reducer/resize-flex-children.ts

@@ -0,0 +1,55 @@
+import React, { CSSProperties, ReactElement } from 'react';
+import { dimension } from '../common-types';
+import { followPath, getProps } from '../utils';
+import { SplitterResizeAction } from './layoutTypes';
+import { swapChild } from './replace-layout-element';
+
+export function resizeFlexChildren(
+  layoutRoot: ReactElement,
+  { path, sizes }: SplitterResizeAction
+) {
+  const target = followPath(layoutRoot, path, true);
+  const { children, style } = getProps(target);
+
+  const dimension = style.flexDirection === 'column' ? 'height' : 'width';
+  const replacementChildren = applySizesToChildren(children, sizes, dimension);
+
+  const replacement = React.cloneElement(target, undefined, replacementChildren);
+
+  return swapChild(layoutRoot, target, replacement);
+}
+
+function applySizesToChildren(
+  children: ReactElement[],
+  sizes: { currentSize: number; flexBasis: number }[],
+  dimension: dimension
+) {
+  return children.map((child, i) => {
+    const {
+      style: { [dimension]: size, flexBasis: actualFlexBasis }
+    } = getProps(child);
+    const meta = sizes[i];
+    const { currentSize, flexBasis } = meta;
+    const hasCurrentSize = currentSize !== undefined;
+    const newSize = hasCurrentSize ? meta.currentSize : flexBasis;
+
+    if (newSize === undefined || size === newSize || actualFlexBasis === newSize) {
+      return child;
+    }
+    return React.cloneElement(child, {
+      style: applySizeToChild(child.props.style, dimension, newSize)
+    });
+  });
+}
+
+function applySizeToChild(style: CSSProperties, dimension: dimension, newSize: number) {
+  const hasSize = typeof style[dimension] === 'number';
+  const { flexShrink = 1, flexGrow = 1 } = style;
+  return {
+    ...style,
+    [dimension]: hasSize ? newSize : 'auto',
+    flexBasis: hasSize ? 'auto' : newSize,
+    flexShrink,
+    flexGrow
+  };
+}

package/src/layout-reducer/wrap-layout-element.ts

@@ -0,0 +1,307 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { uuid } from "@vuu-ui/vuu-utils";
+import React, { ReactElement } from "react";
+import { rectTuple } from "../common-types";
+import { DropPos } from "../drag-drop/dragDropTypes";
+import { DropTarget } from "../drag-drop/DropTarget";
+import { ComponentRegistry } from "../registry/ComponentRegistry";
+import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils";
+import {
+  createFlexbox,
+  createPlaceHolder,
+  flexDirection,
+  getFlexStyle,
+  getIntrinsicSize,
+  wrapIntrinsicSizeComponentWithFlexbox,
+} from "./flexUtils";
+import { LayoutModel } from "./layoutTypes";
+import { applyLayoutProps, LayoutProps } from "./layoutUtils";
+
+export interface LayoutSpec {
+  type: "Stack" | "Flexbox";
+  flexDirection: "column" | "row";
+  showTabs?: boolean;
+}
+
+const isHtmlElement = (component: LayoutModel) => {
+  const [firstLetter] = typeOf(component) as string;
+  return firstLetter === firstLetter.toLowerCase();
+};
+
+export function wrap(
+  container: ReactElement,
+  existingComponent: any,
+  newComponent: any,
+  pos: DropPos,
+  clientRect?: DropTarget["clientRect"],
+  dropRect?: DropTarget["dropRect"]
+): ReactElement {
+  const { children: containerChildren, path: containerPath } =
+    getProps(container);
+
+  const existingComponentPath = getProp(existingComponent, "path");
+  const { idx, finalStep } = nextStep(containerPath, existingComponentPath);
+  const children = finalStep
+    ? updateChildren(
+        container,
+        containerChildren,
+        existingComponent,
+        newComponent,
+        pos,
+        clientRect,
+        dropRect
+      )
+    : containerChildren.map((child: ReactElement, index: number) =>
+        index === idx
+          ? wrap(
+              child,
+              existingComponent,
+              newComponent,
+              pos,
+              clientRect,
+              dropRect
+            )
+          : child
+      );
+
+  return React.cloneElement(container, undefined, children);
+}
+
+function updateChildren(
+  container: LayoutModel,
+  containerChildren: ReactElement[],
+  existingComponent: ReactElement,
+  newComponent: ReactElement,
+  pos: DropPos,
+  clientRect?: DropTarget["clientRect"],
+  dropRect?: rectTuple
+) {
+  const intrinsicSize = getIntrinsicSize(newComponent);
+
+  if (intrinsicSize?.width && intrinsicSize?.height) {
+    if (clientRect === undefined || dropRect === undefined) {
+      throw Error(
+        "wrap-layout-element, updateChildren clientRect and dropRect must both be available"
+      );
+    }
+    return wrapIntrinsicSizedComponent(
+      containerChildren,
+      existingComponent,
+      newComponent,
+      pos,
+      clientRect,
+      dropRect
+    );
+  }
+  return wrapFlexComponent(
+    container,
+    containerChildren,
+    existingComponent,
+    newComponent,
+    pos
+  );
+}
+
+function wrapFlexComponent(
+  container: LayoutModel,
+  containerChildren: ReactElement[],
+  existingComponent: ReactElement,
+  newComponent: ReactElement,
+  pos: DropPos
+) {
+  const { version = 0 } = getProps(newComponent);
+  const existingComponentPath = getProp(existingComponent, "path");
+  const {
+    type,
+    flexDirection,
+    showTabs: showTabsProp,
+  } = getLayoutSpecForWrapper(pos);
+  const [style, existingComponentStyle, newComponentStyle] =
+    getWrappedFlexStyles(
+      type,
+      existingComponent,
+      newComponent,
+      flexDirection,
+      pos
+    );
+  const targetFirst = isTargetFirst(pos);
+  const active = targetFirst ? 1 : 0;
+
+  const newComponentProps = {
+    resizeable: true,
+    style: newComponentStyle,
+    version: version + 1,
+  };
+  const resizeProp = isHtmlElement(existingComponent)
+    ? "data-resizeable"
+    : "resizeable";
+  const existingComponentProps = {
+    [resizeProp]: true,
+    style: existingComponentStyle,
+  };
+
+  const showTabs = type === "Stack" ? { showTabs: showTabsProp } : undefined;
+  const splitterSize =
+    type === "Flexbox"
+      ? {
+          splitterSize:
+            (typeOf(container) === "Flexbox" && container.props.splitterSize) ??
+            undefined,
+        }
+      : undefined;
+
+  const id = uuid();
+  const wrapper = React.createElement(
+    ComponentRegistry[type],
+    {
+      active,
+      id,
+      key: id,
+      path: getProp(existingComponent, "path"),
+      flexFill: getProp(existingComponent, "flexFill"),
+      ...splitterSize,
+      ...showTabs,
+      style,
+      resizeable: getProp(existingComponent, "resizeable"),
+    } as LayoutProps,
+    targetFirst
+      ? [
+          resetPath(
+            existingComponent,
+            `${existingComponentPath}.0`,
+            existingComponentProps
+          ),
+          applyLayoutProps(
+            React.cloneElement(newComponent, newComponentProps),
+            `${existingComponentPath}.1`
+          ),
+        ]
+      : [
+          applyLayoutProps(
+            React.cloneElement(newComponent, newComponentProps),
+            `${existingComponentPath}.0`
+          ),
+          resetPath(
+            existingComponent,
+            `${existingComponentPath}.1`,
+            existingComponentProps
+          ),
+        ]
+  );
+  return containerChildren.map((child: ReactElement) =>
+    child === existingComponent ? wrapper : child
+  );
+}
+
+function wrapIntrinsicSizedComponent(
+  containerChildren: ReactElement[],
+  existingComponent: ReactElement,
+  newComponent: ReactElement,
+  pos: DropPos,
+  clientRect: DropTarget["clientRect"],
+  dropRect: rectTuple
+) {
+  const { flexDirection } = getLayoutSpecForWrapper(pos);
+  const contraDirection = flexDirection === "column" ? "row" : "column";
+  const targetFirst = isTargetFirst(pos);
+
+  const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;
+  const [startPlaceholder, endPlaceholder] =
+    flexDirection === "column"
+      ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]
+      : [dropLeft - clientRect.left, clientRect.right - dropRight];
+  const pathRoot = getProp(existingComponent, "path");
+  let pathIndex = 0;
+
+  const resizeProp = isHtmlElement(existingComponent)
+    ? "data-resizeable"
+    : "resizeable";
+
+  const wrappedChildren = [];
+  if (startPlaceholder) {
+    wrappedChildren.push(
+      targetFirst
+        ? resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
+            [resizeProp]: true,
+            style: { flexBasis: startPlaceholder, flexGrow: 1, flexShrink: 1 },
+          })
+        : createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {
+            flexGrow: 0,
+            flexShrink: 0,
+          })
+    );
+  }
+  wrappedChildren.push(
+    wrapIntrinsicSizeComponentWithFlexbox(
+      newComponent,
+      contraDirection,
+      `${pathRoot}.${pathIndex++}`,
+      clientRect,
+      dropRect
+    )
+  );
+  if (endPlaceholder) {
+    wrappedChildren.push(
+      targetFirst
+        ? createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0)
+        : resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
+            [resizeProp]: true,
+            style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },
+          })
+    );
+  }
+
+  const wrapper = createFlexbox(
+    flexDirection,
+    existingComponent.props,
+    wrappedChildren,
+    pathRoot
+  );
+  return containerChildren.map((child) =>
+    child === existingComponent ? wrapper : child
+  );
+}
+
+function getWrappedFlexStyles(
+  type: string,
+  existingComponent: ReactElement,
+  newComponent: ReactElement,
+  flexDirection: flexDirection,
+  pos: DropPos
+) {
+  const style = {
+    ...existingComponent.props.style,
+    flexDirection,
+  };
+
+  const dimension =
+    type === "Flexbox" && flexDirection === "column" ? "height" : "width";
+  const newComponentStyle = getFlexStyle(newComponent, dimension, pos);
+  const existingComponentStyle = getFlexStyle(existingComponent, dimension);
+
+  return [style, existingComponentStyle, newComponentStyle];
+}
+
+const isTargetFirst = (pos: DropPos) =>
+  pos.position.SouthOrEast
+    ? true
+    : pos?.tab?.positionRelativeToTab === "before"
+    ? false
+    : pos.position.Header
+    ? true
+    : false;
+
+function getLayoutSpecForWrapper(pos: DropPos): LayoutSpec {
+  if (pos.position.Header) {
+    return {
+      type: "Stack",
+      flexDirection: "column",
+      showTabs: true,
+    };
+  } else {
+    return {
+      type: "Flexbox",
+      flexDirection: pos.position.EastOrWest ? "row" : "column",
+    };
+  }
+}