@vuu-ui/vuu-layout 0.0.27

package/src/layout-reducer/flexUtils.ts

@@ -0,0 +1,281 @@
+import React from "react";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { uuid } from "@vuu-ui/vuu-utils";
+import { ComponentRegistry } from "../registry/ComponentRegistry";
+import { getProps, resetPath } from "../utils";
+import { dimension, rect, rectTuple } from "../common-types";
+import { DropPos } from "../drag-drop/dragDropTypes";
+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",
+};
+
+export type flexDirection = "row" | "column";
+
+type contraDimension = dimension;
+type flexDimensionTuple = [dimension, contraDimension, flexDirection];
+export type position = {
+  height?: number;
+  width?: number;
+};
+
+export const getFlexDimensions = (flexDirection: flexDirection = "row") => {
+  if (flexDirection === "row") {
+    return ["width", "height", "column"] as flexDimensionTuple;
+  } else {
+    return ["height", "width", "row"] as flexDimensionTuple;
+  }
+};
+
+const isPercentageSize = (value: string | number) =>
+  typeof value === "string" && value.endsWith("%");
+
+export const getIntrinsicSize = (
+  component: ReactElement
+): { height?: number; width?: number } | undefined => {
+  const { style: { width = auto, height = auto } = NO_STYLE } = component.props;
+
+  // Eliminate 'auto' and percentage sizes
+  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 undefined;
+  }
+};
+
+export function getFlexStyle(
+  component: ReactElement,
+  dimension: dimension,
+  pos?: DropPos
+) {
+  const crossDimension = CROSS_DIMENSION[dimension];
+  const {
+    style: {
+      [crossDimension]: intrinsicCrossSize = auto,
+      ...intrinsicStyles
+    } = NO_STYLE,
+  } = component.props;
+
+  if (pos && pos[dimension]) {
+    return {
+      ...intrinsicStyles,
+      ...defaultFlexStyle,
+      flexBasis: pos[dimension],
+      flexGrow: 0,
+      flexShrink: 0,
+    };
+  } else {
+    return {
+      ...intrinsicStyles,
+      ...defaultFlexStyle,
+      [crossDimension]: intrinsicCrossSize,
+    };
+  }
+}
+
+//TODO this is not comprehensive
+export function hasUnboundedFlexStyle(component: ReactElement) {
+  const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } =
+    component.props;
+  // console.log(`flex ${flex}, flexBasis ${flexBasis}, flexShrink ${flexShrink}, flexGrow ${flexGrow}`)
+  if (typeof flex === "number") {
+    return true;
+  } else if (flexBasis === 0 && flexGrow === 1 && flexShrink === 1) {
+    return true;
+  } else if (typeof flexBasis === "number") {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+export function getFlexOrIntrinsicStyle(
+  component: ReactElement,
+  dimension: dimension,
+  pos: position
+) {
+  const crossDimension = CROSS_DIMENSION[dimension];
+  const {
+    style: {
+      [dimension]: intrinsicSize = auto,
+      [crossDimension]: intrinsicCrossSize = auto,
+      ...intrinsicStyles
+    } = NO_STYLE,
+  } = component.props;
+
+  if (intrinsicSize !== auto) {
+    if (isPercentageSize(intrinsicSize)) {
+      return {
+        // Is this right? discrad the percenbtage size ?
+        flexBasis: 0,
+        flexGrow: 1,
+        flexShrink: 1,
+        [dimension]: undefined,
+        [crossDimension]: intrinsicCrossSize,
+      };
+    } else {
+      return {
+        // or should we leave this as auto until user resizes ?
+        flexBasis: intrinsicSize,
+        flexGrow: 0,
+        flexShrink: 0,
+        [dimension]: intrinsicSize,
+        [crossDimension]: intrinsicCrossSize,
+      };
+    }
+  } else if (pos && pos[dimension]) {
+    return {
+      ...intrinsicStyles,
+      ...defaultFlexStyle,
+      flexBasis: pos[dimension],
+      flexGrow: 0,
+      flexShrink: 0,
+    };
+  } else {
+    return {
+      ...intrinsicStyles,
+      // ...defaultFlexStyle,
+      [crossDimension]: intrinsicCrossSize,
+    };
+  }
+}
+
+export function wrapIntrinsicSizeComponentWithFlexbox(
+  component: ReactElement,
+  flexDirection: flexDirection,
+  path: string,
+  clientRect?: rect,
+  dropRect?: rectTuple
+) {
+  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 {
+    // If we don't pass the rect values, we are wrapping an existing child, this is always a trailing placeholder
+    endPlaceholder = true;
+  }
+
+  const { version = 0, style } = getProps(component);
+
+  wrappedChildren.push(
+    resetPath(component, `${path}.${pathIndex++}`, {
+      version: version + 1,
+      style: {
+        ...style,
+        flexBasis: "auto",
+        flexGrow: 0,
+        flexShrink: 0,
+      },
+    })
+  );
+
+  if (endPlaceholder) {
+    wrappedChildren.push(
+      createPlaceHolder(`${path}.${pathIndex++}`, 0, undefined, {
+        [`data-${flexDirection}-placeholder`]: true,
+      })
+    );
+  }
+
+  return createFlexbox(
+    flexDirection,
+    { resizeable: false, style: { flexBasis: "auto" } },
+    wrappedChildren,
+    path
+  );
+}
+
+const getFlexValue = (flexBasis: number, flexFill: boolean) => {
+  if (flexFill) {
+    return undefined;
+  } else if (flexBasis === 0) {
+    return 1;
+  } else {
+    return 0;
+  }
+};
+
+export function createFlexbox(
+  flexDirection: flexDirection,
+  props: any,
+  children: ReactNode,
+  path: string
+) {
+  const id = uuid();
+  const { flexFill, style, resizeable = true } = props;
+  const { flexBasis = flexFill ? undefined : "auto" } = style;
+  const flex = getFlexValue(flexBasis, flexFill);
+  return React.createElement<any>(
+    ComponentRegistry.Flexbox,
+    {
+      id,
+      key: id,
+      path,
+      flexFill,
+      style: {
+        ...style,
+        flexDirection,
+        flexBasis,
+        flexGrow: flex,
+        flexShrink: flex,
+      },
+      resizeable,
+    },
+    children
+  );
+}
+
+const baseStyle = { flexGrow: 1, flexShrink: 1 };
+
+export function createPlaceHolder(
+  path: string,
+  size: number,
+  style?: CSSProperties,
+  props?: any
+) {
+  const id = uuid();
+  return React.createElement("div", {
+    ...placeHolderProps,
+    ...props,
+    "data-path": path,
+    id,
+    key: id,
+    style: { ...baseStyle, ...style, flexBasis: size },
+  });
+}

package/src/layout-reducer/index.ts

@@ -0,0 +1,4 @@
+export * from './layout-reducer';
+export * from './layoutTypes';
+export * from './layoutUtils';
+export * from './flexUtils';

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

@@ -0,0 +1,365 @@
+import React, { ReactElement } from "react";
+import { uuid } from "@vuu-ui/vuu-utils";
+import { getManagedDimension, LayoutProps } from "./layoutUtils";
+import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils";
+import {
+  createPlaceHolder,
+  flexDirection,
+  getFlexDimensions,
+  getFlexOrIntrinsicStyle,
+  getIntrinsicSize,
+  wrapIntrinsicSizeComponentWithFlexbox,
+} from "./flexUtils";
+import { LayoutModel, LayoutRoot } from "./layoutTypes";
+import { DropPos } from "../drag-drop";
+import { DropTarget } from "../drag-drop/DropTarget";
+import { rectTuple } from "../common-types";
+
+type insertionPosition = "before" | "after";
+
+export function getInsertTabBeforeAfter(stack: LayoutModel, pos: DropPos) {
+  const tabs = stack.props.children;
+  const tabCount = tabs.length;
+  const { index = -1, positionRelativeToTab = "after" } = pos.tab || {};
+  return index === -1 || index >= tabCount
+    ? [tabs[tabCount - 1], "after"]
+    : [tabs[index] ?? null, positionRelativeToTab];
+}
+
+export function insertIntoContainer(
+  container: ReactElement,
+  targetContainer: ReactElement,
+  newComponent: ReactElement
+): ReactElement {
+  const {
+    active: containerActive,
+    children: containerChildren = [],
+    path: containerPath,
+  } = getProps(container) as LayoutProps;
+
+  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
+              ) as ReactElement)
+            : child
+        ),
+      ];
+  const active =
+    typeOf(container) === "Stack"
+      ? Array.isArray(insertedIdx)
+        ? (insertedIdx[0] as number)
+        : insertedIdx
+      : containerActive;
+
+  return React.cloneElement(container, { active }, children);
+}
+function insertIntoChildren(
+  container: LayoutModel,
+  containerChildren: ReactElement[],
+  newComponent: ReactElement
+): [number, ReactElement[]] {
+  const containerPath = getProp(container, "path");
+  const count = containerChildren?.length;
+  const { id = uuid() } = getProps(newComponent);
+
+  if (count) {
+    return [
+      count,
+      containerChildren.concat(
+        resetPath(newComponent, `${containerPath}.${count}`, { id, key: id })
+      ),
+    ];
+  } else {
+    return [0, [resetPath(newComponent, `${containerPath}.0`, { id })]];
+  }
+}
+
+export function insertBesideChild(
+  container: ReactElement,
+  existingComponent: any,
+  newComponent: any,
+  insertionPosition: insertionPosition,
+  pos?: DropPos,
+  clientRect?: any,
+  dropRect?: any
+): ReactElement {
+  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: ReactElement, index: number) =>
+          index === idx
+            ? insertBesideChild(
+                child,
+                existingComponent,
+                newComponent,
+                insertionPosition,
+                pos,
+                clientRect,
+                dropRect
+              )
+            : child
+        ),
+      ];
+
+  const active = typeOf(container) === "Stack" ? insertedIdx : containerActive;
+  return React.cloneElement(container, { active }, children);
+}
+
+function updateChildren(
+  container: LayoutModel,
+  containerChildren: ReactElement[],
+  idx: number,
+  newComponent: ReactElement,
+  insertionPosition: insertionPosition,
+  pos: DropPos,
+  clientRect: DropTarget["clientRect"],
+  dropRect: DropTarget["dropRect"]
+) {
+  const intrinsicSize = getIntrinsicSize(newComponent);
+  if (intrinsicSize?.width && intrinsicSize?.height) {
+    return insertIntrinsicSizedComponent(
+      container,
+      containerChildren,
+      idx,
+      newComponent,
+      insertionPosition,
+      clientRect,
+      dropRect!
+    );
+  } else {
+    return insertFlexComponent(
+      container,
+      containerChildren,
+      idx,
+      newComponent,
+      insertionPosition,
+      pos?.width || pos?.height,
+      clientRect
+    );
+  }
+}
+
+const getLeadingPlaceholderSize = (
+  flexDirection: flexDirection,
+  insertionPosition: insertionPosition,
+  { top, right, bottom, left }: DropTarget["clientRect"],
+  [rectLeft, rectTop, rectRight, rectBottom]: rectTuple
+) => {
+  if (flexDirection === "column" && insertionPosition === "before") {
+    return rectTop - top;
+  } else if (flexDirection === "column") {
+    return bottom - rectBottom;
+  } else if (flexDirection === "row" && insertionPosition === "before") {
+    return rectLeft - left;
+  } else if (flexDirection === "row") {
+    return right - rectRight;
+  }
+};
+
+function insertIntrinsicSizedComponent(
+  container: LayoutModel,
+  containerChildren: ReactElement[],
+  idx: number,
+  newComponent: ReactElement,
+  insertionPosition: insertionPosition,
+  clientRect: DropTarget["clientRect"],
+  dropRect: rectTuple
+) {
+  const {
+    style: { flexDirection },
+  } = getProps(container);
+  const [dimension, crossDimension, contraDirection] =
+    getFlexDimensions(flexDirection);
+  const { [crossDimension]: intrinsicCrossSize, [dimension]: intrinsicSize } =
+    getIntrinsicSize(newComponent) as { height: number; width: number };
+  const path = getProp(containerChildren[idx], "path");
+
+  // If we are introducing a new item into a row/column, but it is not flush against existing child, we will insert
+  // a leading placeholder ...
+  const placeholderSize = getLeadingPlaceholderSize(
+    flexDirection,
+    insertionPosition,
+    clientRect,
+    dropRect
+  );
+
+  const [itemToInsert, size] =
+    intrinsicCrossSize < clientRect[crossDimension]
+      ? [
+          wrapIntrinsicSizeComponentWithFlexbox(
+            newComponent,
+            contraDirection,
+            path,
+            clientRect,
+            dropRect
+          ),
+          intrinsicSize,
+        ]
+      : [newComponent, undefined];
+
+  const placeholder = placeholderSize
+    ? createPlaceHolder(path, placeholderSize, { flexGrow: 0, flexShrink: 0 })
+    : undefined;
+
+  if (intrinsicCrossSize > clientRect[crossDimension]) {
+    containerChildren = containerChildren.map((child) => {
+      if (getProp(child, "placeholder")) {
+        return child;
+      } else {
+        const { [crossDimension]: intrinsicCrossChildSize } = getIntrinsicSize(
+          child
+        ) as {
+          height: number;
+          width: number;
+        };
+        if (
+          intrinsicCrossChildSize &&
+          intrinsicCrossChildSize < intrinsicCrossSize
+        ) {
+          return wrapIntrinsicSizeComponentWithFlexbox(
+            child,
+            contraDirection,
+            getProp(child, "path")
+          );
+        } else {
+          return child;
+        }
+      }
+    });
+  }
+
+  return insertFlexComponent(
+    container,
+    containerChildren,
+    idx,
+    itemToInsert,
+    insertionPosition,
+    size,
+    clientRect,
+    placeholder
+  );
+}
+
+function insertFlexComponent(
+  container: LayoutModel,
+  containerChildren: ReactElement[],
+  idx: number,
+  newComponent: ReactElement,
+  insertionPosition: "before" | "after",
+  size: number | undefined,
+  targetRect: DropTarget["clientRect"],
+  placeholder?: ReactElement
+) {
+  const containerPath = getProp(container, "path");
+  let insertedIdx = 0;
+  const children =
+    !containerChildren || containerChildren.length === 0
+      ? [newComponent]
+      : containerChildren
+          .reduce<ReactElement[]>((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 : resetPath(child, `${containerPath}.${i}`)
+          );
+
+  return [insertedIdx, children];
+}
+
+function getStyledComponents(
+  container: LayoutModel,
+  existingComponent: ReactElement,
+  newComponent: ReactElement,
+  targetRect: DropTarget["clientRect"]
+): [ReactElement, ReactElement] {
+  let { id = uuid(), version = 0 } = getProps(newComponent);
+  version += 1;
+  if (typeOf(container) === "Flexbox") {
+    const [dim] = getManagedDimension(container.props.style);
+    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,
+      }),
+    ];
+  } else {
+    const {
+      style: { left: _1, top: _2, flex: _3, ...style } = {
+        left: undefined,
+        top: undefined,
+        flex: undefined,
+      },
+    } = getProps(newComponent);
+    // TODO why would we strip out width, height if resizeable
+    // we might need these if in a Stack, for example
+    // const dimensions = source.props.resizeable ? {} : { width, height };
+    return [
+      existingComponent,
+      React.cloneElement(newComponent, { id, version, style }),
+    ];
+  }
+}