@vuu-ui/vuu-layout 0.0.27

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

@@ -0,0 +1,255 @@
+import React, { ReactElement } from "react";
+import { isContainer } from "../registry/ComponentRegistry";
+import {
+  findTarget,
+  followPath,
+  followPathToParent,
+  getProp,
+  getProps,
+  typeOf,
+} from "../utils";
+import { getIntrinsicSize } from "./flexUtils";
+import {
+  getInsertTabBeforeAfter,
+  insertBesideChild,
+  insertIntoContainer,
+} from "./insert-layout-element";
+import {
+  AddAction,
+  DragDropAction,
+  LayoutReducerAction,
+  LayoutActionType,
+  SetTitleAction,
+  SwitchTabAction,
+  MaximizeAction,
+} from "./layoutTypes";
+import { LayoutProps } from "./layoutUtils";
+import { removeChild } from "./remove-layout-element";
+import {
+  replaceChild,
+  swapChild,
+  _replaceChild,
+} from "./replace-layout-element";
+import { resizeFlexChildren } from "./resize-flex-children";
+import { wrap } from "./wrap-layout-element";
+import { DropPos } from "../drag-drop/dragDropTypes";
+import { DropTarget } from "../drag-drop/DropTarget";
+
+// const handlers: Handlers = {
+// [Action.MAXIMIZE]: setChildProps,
+// [Action.MINIMIZE]: setChildProps,
+// [Action.RESTORE]: setChildProps,
+// };
+
+export const layoutReducer = (
+  state: ReactElement,
+  action: LayoutReducerAction
+): ReactElement => {
+  switch (action.type) {
+    case LayoutActionType.ADD:
+      return addChild(state, action);
+    case LayoutActionType.DRAG_DROP:
+      return dragDrop(state, action);
+    case LayoutActionType.MAXIMIZE:
+      return setChildProps(state, action);
+    case LayoutActionType.REMOVE:
+      return removeChild(state, action);
+    case LayoutActionType.REPLACE:
+      return replaceChild(state, action);
+    case LayoutActionType.SET_TITLE:
+      return setTitle(state, action);
+    case LayoutActionType.SPLITTER_RESIZE:
+      return resizeFlexChildren(state, action);
+    case LayoutActionType.SWITCH_TAB:
+      return switchTab(state, action);
+    default:
+      console.warn(
+        `layoutActionHandlers. No handler for action.type ${
+          (action as any).type
+        }`
+      );
+      return state;
+  }
+};
+
+function switchTab(state: ReactElement, { path, nextIdx }: SwitchTabAction) {
+  var target = followPath(state, path, true);
+  const replacement = React.cloneElement<any>(target, {
+    active: nextIdx,
+  });
+  return swapChild(state, target, replacement);
+}
+
+function setTitle(state: ReactElement, { path, title }: SetTitleAction) {
+  var target = followPath(state, path, true);
+  const replacement = React.cloneElement(target, {
+    title,
+  });
+  return swapChild(state, target, replacement);
+}
+
+function setChildProps(state: ReactElement, { path, type }: MaximizeAction) {
+  if (path) {
+    // path will always be set here. Need to distinguisj ViewAction from LayoutAction
+    var target = followPath(state, path, true);
+    return swapChild(state, target, target, type);
+  } else {
+    return state;
+  }
+}
+
+function dragDrop(
+  layoutRoot: ReactElement,
+  action: DragDropAction
+): ReactElement {
+  console.log("drag drop");
+  const {
+    draggedReactElement: newComponent,
+    dragInstructions,
+    dropTarget,
+  } = action;
+  const existingComponent = dropTarget.component as ReactElement;
+  const { pos } = dropTarget;
+  const destinationTabstrip =
+    pos?.position?.Header && typeOf(existingComponent) === "Stack";
+  const { id, version } = getProps(newComponent);
+  const intrinsicSize = getIntrinsicSize(newComponent);
+  let newLayoutRoot: ReactElement;
+  if (destinationTabstrip) {
+    const [targetTab, insertionPosition] = getInsertTabBeforeAfter(
+      existingComponent!,
+      pos
+    );
+    if (targetTab === undefined) {
+      newLayoutRoot = insertIntoContainer(
+        layoutRoot,
+        existingComponent,
+        newComponent
+      );
+    } else {
+      newLayoutRoot = insertBesideChild(
+        layoutRoot,
+        targetTab,
+        newComponent,
+        insertionPosition
+      );
+    }
+  } else if (!intrinsicSize && pos?.position?.Centre) {
+    newLayoutRoot = _replaceChild(
+      layoutRoot,
+      existingComponent as ReactElement,
+      newComponent
+    );
+  } else {
+    newLayoutRoot = dropLayoutIntoContainer(
+      layoutRoot,
+      dropTarget as DropTarget,
+      newComponent
+    );
+  }
+
+  // return newLayoutRoot
+
+  if (dragInstructions.DoNotRemove) {
+    return newLayoutRoot;
+  } else {
+    const finalTarget = findTarget(
+      newLayoutRoot,
+      (props: LayoutProps) => props.id === id && props.version === version
+    ) as ReactElement;
+    const finalPath = getProp(finalTarget, "path");
+    return removeChild(newLayoutRoot, { path: finalPath, type: "remove" });
+  }
+}
+
+function addChild(
+  layoutRoot: ReactElement,
+  { path: containerPath, component }: AddAction
+) {
+  return insertIntoContainer(
+    layoutRoot,
+    followPath(layoutRoot, containerPath) as ReactElement,
+    component
+  );
+}
+
+function dropLayoutIntoContainer(
+  layoutRoot: ReactElement,
+  dropTarget: DropTarget,
+  newComponent: ReactElement
+): ReactElement {
+  const {
+    component: existingComponent,
+    pos,
+    clientRect,
+    dropRect,
+  } = dropTarget;
+  const existingComponentPath = getProp(existingComponent, "path");
+  // In a Draggable layout, 0.n is the top-level layout
+  if (
+    /* existingComponent.path === '0.0' || */ existingComponentPath === "0.0"
+  ) {
+    return wrap(layoutRoot, existingComponent, newComponent, pos);
+  } else {
+    var targetContainer = followPathToParent(
+      layoutRoot,
+      existingComponentPath
+    ) as ReactElement;
+
+    if (withTheGrain(pos, targetContainer)) {
+      const insertionPosition = pos.position.SouthOrEast ? "after" : "before";
+      return insertBesideChild(
+        layoutRoot,
+        existingComponent,
+        newComponent,
+        insertionPosition,
+        pos,
+        clientRect,
+        dropRect
+      );
+    } else if (!withTheGrain(pos, targetContainer)) {
+      return wrap(
+        layoutRoot,
+        existingComponent,
+        newComponent,
+        pos,
+        clientRect,
+        dropRect
+      );
+    } else if (isContainer(typeOf(targetContainer) as string)) {
+      return wrap(layoutRoot, existingComponent, newComponent, pos);
+    } else {
+      throw Error(`no support right now for position = ${pos.position}`);
+    }
+  }
+
+  return layoutRoot;
+}
+
+// Note: withTheGrain is not the negative of againstTheGrain - the difference lies in the
+// handling of non-Flexible containers, the response for which is always false;
+function withTheGrain(pos: DropPos, container: ReactElement) {
+  if (pos.position.Centre) {
+    return isTerrace(container) || isTower(container);
+  }
+
+  return pos.position.NorthOrSouth
+    ? isTower(container)
+    : pos.position.EastOrWest
+    ? isTerrace(container)
+    : false;
+}
+
+function isTower(container: ReactElement) {
+  return (
+    typeOf(container) === "Flexbox" &&
+    container.props.style.flexDirection === "column"
+  );
+}
+
+function isTerrace(container: ReactElement) {
+  return (
+    typeOf(container) === "Flexbox" &&
+    container.props.style.flexDirection !== "column"
+  );
+}

package/src/layout-reducer/layoutTypes.ts

@@ -0,0 +1,151 @@
+import { ReactElement } from "react";
+import { DropTarget } from "../drag-drop/DropTarget";
+import { DragDropRect, DragInstructions, DropPos } from "../drag-drop";
+
+export interface WithProps {
+  props?: { [key: string]: any };
+}
+
+export interface WithType {
+  props?: any;
+  title?: string;
+  type: string;
+}
+
+export interface LayoutRoot extends WithProps {
+  active?: number;
+  children?: ReactElement[];
+  type: string;
+}
+
+export interface LayoutJSON extends WithType {
+  children?: LayoutJSON[];
+  id?: string;
+  props?: { [key: string]: any };
+  state?: any;
+  type: string;
+}
+
+export interface WithActive {
+  active?: number;
+}
+
+export type LayoutModel = LayoutRoot | ReactElement | WithType;
+
+export type layoutType = "Flexbox" | "View" | "DraggableLayout" | "Stack";
+
+export const LayoutActionType = {
+  ADD: "add",
+  DRAG_START: "drag-start",
+  DRAG_DROP: "drag-drop",
+  MAXIMIZE: "maximize",
+  MINIMIZE: "minimize",
+  REMOVE: "remove",
+  REPLACE: "replace",
+  RESTORE: "restore",
+  SAVE: "save",
+  SET_TITLE: "set-title",
+  SPLITTER_RESIZE: "splitter-resize",
+  SWITCH_TAB: "switch-tab",
+  TEAROUT: "tearout",
+} as const;
+
+export type AddAction = {
+  component: any;
+  path: string;
+  type: typeof LayoutActionType.ADD;
+};
+
+export type DragDropAction = {
+  draggedReactElement: ReactElement;
+  dragInstructions: any;
+  dropTarget: Partial<DropTarget>;
+  type: typeof LayoutActionType.DRAG_DROP;
+};
+
+export type MaximizeAction = {
+  path?: string;
+  type: typeof LayoutActionType.MAXIMIZE;
+};
+export type MinimizeAction = {
+  path?: string;
+  type: typeof LayoutActionType.MINIMIZE;
+};
+export type RemoveAction = {
+  path?: string;
+  type: typeof LayoutActionType.REMOVE;
+};
+export type ReplaceAction = {
+  replacement: any;
+  target: any;
+  type: typeof LayoutActionType.REPLACE;
+};
+export type RestoreAction = {
+  path?: string;
+  type: typeof LayoutActionType.RESTORE;
+};
+export type SetTitleAction = {
+  path: string;
+  title: string;
+  type: typeof LayoutActionType.SET_TITLE;
+};
+export type SplitterResizeAction = {
+  path: string;
+  sizes: { currentSize: number; flexBasis: number }[];
+  type: typeof LayoutActionType.SPLITTER_RESIZE;
+};
+export type SwitchTabAction = {
+  nextIdx: number;
+  path: string;
+  type: typeof LayoutActionType.SWITCH_TAB;
+};
+export type TearoutAction = {
+  path?: string;
+  type: typeof LayoutActionType.TEAROUT;
+};
+
+export type LayoutReducerAction =
+  | AddAction
+  | DragDropAction
+  | MaximizeAction
+  | MinimizeAction
+  | RemoveAction
+  | ReplaceAction
+  | RestoreAction
+  | SetTitleAction
+  | SplitterResizeAction
+  | SwitchTabAction;
+
+export type SaveAction = {
+  type: typeof LayoutActionType.SAVE;
+};
+
+export type AddToolbarContributionViewAction = {
+  content: ReactElement;
+  location: string;
+  type: "add-toolbar-contribution";
+};
+
+export type RemoveToolbarContributionViewAction = {
+  location: string;
+  type: "remove-toolbar-contribution";
+};
+
+export type MousedownViewAction = {
+  preDragActivity?: any;
+  index?: number;
+  type: "mousedown";
+};
+
+// TODO split this out into separate actions for different drag scenarios
+export type DragStartAction = {
+  payload?: ReactElement;
+  dragContainerPath?: string;
+  dragElement?: HTMLElement;
+  dragRect: DragDropRect;
+  dropTargets?: string[];
+  evt: MouseEvent;
+  instructions?: DragInstructions;
+  path: string;
+  type: typeof LayoutActionType.DRAG_START;
+};

package/src/layout-reducer/layoutUtils.ts

@@ -0,0 +1,302 @@
+import { uuid } from "@vuu-ui/vuu-utils";
+import { CSSProperties, ReactElement } from "react";
+import React, { cloneElement } from "react";
+import { dimension } from "../common-types";
+import {
+  ComponentRegistry,
+  isContainer,
+  isLayoutComponent,
+} from "../registry/ComponentRegistry";
+import {
+  getPersistentState,
+  hasPersistentState,
+  setPersistentState,
+} from "../use-persistent-state";
+import { expandFlex, getProps, typeOf } from "../utils";
+import { LayoutJSON, LayoutModel, layoutType } from "./layoutTypes";
+
+export const getManagedDimension = (
+  style: CSSProperties
+): [dimension, dimension] =>
+  style.flexDirection === "column" ? ["height", "width"] : ["width", "height"];
+
+const theKidHasNoStyle: CSSProperties = {};
+
+export const applyLayoutProps = (component: ReactElement, path = "0") => {
+  const [layoutProps, children] = getChildLayoutProps(
+    typeOf(component) as string,
+    component.props,
+    path
+  );
+  return React.cloneElement(component, layoutProps, children);
+};
+
+export interface LayoutProps {
+  active?: number;
+  "data-path"?: string;
+  children?: ReactElement[];
+  column?: any;
+  dropTarget?: any;
+  id: string;
+  key: string;
+  layout?: any;
+  path?: string;
+  resizeable?: boolean;
+  style: CSSProperties;
+  type?: string;
+  version?: number;
+}
+
+export const processLayoutElement = (
+  layoutElement: ReactElement,
+  previousLayout?: ReactElement
+): ReactElement => {
+  const type = typeOf(layoutElement) as string;
+  const [layoutProps, children] = getChildLayoutProps(
+    type,
+    layoutElement.props,
+    "0",
+    undefined,
+    previousLayout
+  );
+  return cloneElement(layoutElement, layoutProps, children);
+};
+
+export const applyLayout = (
+  type: layoutType,
+  props: LayoutProps,
+  previousLayout?: LayoutModel
+): LayoutModel => {
+  // This works if the root layout is itself loaded from JSON
+  const [layoutProps, children] = getChildLayoutProps(
+    type,
+    props,
+    "0",
+    undefined,
+    previousLayout
+  );
+  return {
+    ...props,
+    ...layoutProps,
+    type,
+    children,
+  };
+};
+
+function getLayoutProps(
+  type: string,
+  props: LayoutProps,
+  path = "0",
+  parentType: string | null = null,
+  previousLayout?: LayoutModel
+): LayoutProps {
+  const {
+    active: prevActive = 0,
+    "data-path": dataPath,
+    path: prevPath = dataPath,
+    id: prevId,
+    style: prevStyle,
+  } = getProps(previousLayout);
+
+  const prevMatch = typeOf(previousLayout) === type && path === prevPath;
+  // TODO is there anything else we can re-use from previousType ?
+  const id = prevMatch ? prevId : props.id ?? uuid();
+  const active = type === "Stack" ? props.active ?? prevActive : undefined;
+
+  const key = id;
+  //TODO this might be wrong if client has updated style ?
+  const style = prevMatch ? prevStyle : getStyle(type, props, parentType);
+  // TODO need two  interfaces to cover these two scenarios
+  return isLayoutComponent(type)
+    ? { id, key, path, style, type, active }
+    : { id, key, style, "data-path": path };
+}
+
+function getChildLayoutProps(
+  type: string,
+  props: LayoutProps,
+  path: string,
+  parentType: string | null = null,
+  previousLayout?: LayoutModel
+): [LayoutProps, ReactElement[]] {
+  const layoutProps = getLayoutProps(
+    type,
+    props,
+    path,
+    parentType,
+    previousLayout
+  );
+
+  if (props.layout && !previousLayout) {
+    // reconstitute children from layout. Will always be a single child,
+    // but return as array to make subsequent processing more consistent
+    return [layoutProps, [layoutFromJson(props.layout, `${path}.0`)]];
+  }
+
+  const previousChildren =
+    (previousLayout as any)?.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: string,
+  children?: ReactElement[],
+  path = "0",
+  previousChildren?: ReactElement[]
+) {
+  // Avoid React.Children.map here, it messes with the keys.
+  const kids = Array.isArray(children)
+    ? children
+    : React.isValidElement(children)
+    ? [children]
+    : [];
+  return isContainer(type) /*|| isView(type)*/
+    ? kids.map((child, i) => {
+        const childType = typeOf(child) as string;
+        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);
+        } else {
+          //TODO is this always correct ?
+          return previousChildren?.[i];
+        }
+      })
+    : // TODO should we check the types of children ?
+      // : previousChildren ?? children;
+      //TODO this is new - is it dangerous ?
+      children;
+}
+
+const getStyle = (
+  type: string,
+  props: LayoutProps,
+  parentType?: string | null
+) => {
+  let { style = theKidHasNoStyle } = props;
+  if (type === "Flexbox") {
+    style = {
+      flexDirection: props.column ? "column" : "row",
+      ...style,
+      display: "flex",
+    };
+  }
+
+  if (style.flex) {
+    const { flex, ...otherStyles } = style;
+    style = {
+      ...otherStyles,
+      ...expandFlex(flex),
+    };
+  } else if (parentType === "Stack") {
+    style = {
+      ...style,
+      ...expandFlex(1),
+    };
+  } else if (
+    parentType === "Flexbox" &&
+    (style.width || style.height) &&
+    style.flexBasis === undefined
+  ) {
+    // strictly, this should depend on flexDirection
+    style = {
+      ...style,
+      flexBasis: "auto",
+      flexGrow: 0,
+      flexShrink: 0,
+    };
+  }
+
+  return style;
+};
+
+//TODO we don't need id beyond view
+export function layoutFromJson(
+  { id = uuid(), type, children, props, state }: LayoutJSON,
+  path: string
+): ReactElement {
+  // if (type === "DraggableLayout") {
+  //   return layoutFromJson(children[0], "0");
+  // }
+
+  const componentType = type.match(/^[a-z]/) ? type : ComponentRegistry[type];
+
+  if (componentType === undefined) {
+    throw Error(`Unable to create component from JSON, unknown type ${type}`);
+  }
+
+  if (state) {
+    setPersistentState(id, state);
+  }
+
+  return React.createElement(
+    componentType,
+    {
+      ...props,
+      id,
+      key: id,
+      path,
+    },
+    children
+      ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`))
+      : undefined
+  );
+}
+
+export function layoutToJSON(component: ReactElement) {
+  return componentToJson(component);
+}
+
+export function componentToJson(component: ReactElement): LayoutJSON {
+  const type = typeOf(component) as string;
+  const { id, children, type: _omit, ...props } = getProps(component);
+
+  const state = hasPersistentState(id) ? getPersistentState(id) : undefined;
+
+  return {
+    id,
+    type,
+    props: serializeProps(props as LayoutProps),
+    state,
+    children: React.Children.map(children, componentToJson),
+  };
+}
+
+export function serializeProps(props?: LayoutProps) {
+  if (props) {
+    const { path, ...otherProps } = props;
+    const result: { [key: string]: any } = {};
+    for (let [key, value] of Object.entries(otherProps)) {
+      result[key] = serializeValue(value);
+    }
+    return result;
+  }
+}
+
+function serializeValue(value: unknown): any {
+  if (
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return value;
+  } else if (Array.isArray(value)) {
+    return value.map(serializeValue);
+  } else if (typeof value === "object" && value !== null) {
+    const result: { [key: string]: any } = {};
+    for (let [k, v] of Object.entries(value)) {
+      result[k] = serializeValue(v);
+    }
+    return result;
+  }
+}