@vuu-ui/vuu-layout 0.0.27

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

@@ -0,0 +1,317 @@
+import React, { ReactElement } from "react";
+import { uuid } from "@vuu-ui/vuu-utils";
+import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils";
+import { ComponentRegistry } from "../registry/ComponentRegistry";
+import {
+  createFlexbox,
+  createPlaceHolder,
+  flexDirection,
+  getFlexStyle,
+  getIntrinsicSize,
+  wrapIntrinsicSizeComponentWithFlexbox,
+} from "./flexUtils";
+import { applyLayoutProps, LayoutProps } from "./layoutUtils";
+import { LayoutModel } from "./layoutTypes";
+import { DropPos } from "../drag-drop/dragDropTypes";
+import { rectTuple } from "../common-types";
+import { DropTarget } from "../drag-drop/DropTarget";
+
+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();
+};
+
+// newComponent has been dropped onto an existingComponent. A wrapper container will be inserted
+// into the layout tree, wrapping the existingComponent. newComponent will be injected into the
+// new wrapper, so existingComponent and newComponent will be siblings. Putting it another way,
+// wrapper will replace existingComponent in the layout tree and it will contain existingComponent
+// and newComponent.
+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
+    );
+  } else {
+    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; // double check this
+
+  // TODO how do we decide whether children should be resizable ?
+  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();
+  var wrapper = React.createElement(
+    ComponentRegistry[type],
+    {
+      active,
+      id,
+      key: id,
+      path: getProp(existingComponent, "path"),
+      flexFill: getProp(existingComponent, "flexFill"),
+      // TODO we should be able to configure this in setDefaultLayoutProps
+      ...splitterSize,
+      ...showTabs,
+      style,
+      resizeable: getProp(existingComponent, "resizeable"),
+    } as LayoutProps,
+    targetFirst
+      ? [
+          resetPath(
+            existingComponent,
+            `${existingComponentPath}.0`,
+            existingComponentProps
+          ),
+          // resetPath(newComponent, `${existingComponentPath}.1`, newComponentProps),
+          applyLayoutProps(
+            React.cloneElement(newComponent, newComponentProps),
+            `${existingComponentPath}.1`
+          ),
+        ]
+      : [
+          applyLayoutProps(
+            React.cloneElement(newComponent, newComponentProps),
+            `${existingComponentPath}.0`
+          ),
+          // resetPath(newComponent, `${existingComponentPath}.0`, newComponentProps),
+          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
+  );
+}
+
+//TODO we need to respect styles on the source, full-on flex might not be appropriate
+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",
+    };
+  }
+}

package/src/layout-view/View.css

@@ -0,0 +1,58 @@
+.vuuView {
+  border: var(--vuuView-border, solid 1px var(--uitk-container-borderColor-medium));
+  display: flex;
+  flex-direction: column;
+  margin: var(--vuuView-margin, 3px);
+  min-height: 50px;
+  min-width: 50px;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+}
+
+.vuuView.focus-visible:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: dotted cornflowerblue 2px;
+}
+
+.vuuView.dragging {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.vuuView-main {
+  /* height: var(--view-content-height);
+  width: var(--view-content-width); */
+  display: flex;
+  flex-direction: var(--vuuView-flexDirection, column);
+  flex-wrap: var(--vuuView-flex-wrap, nowrap);
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.vuuView-main > * {
+  flex-basis: auto;
+  flex-grow: var(--vuuView-flex-grow, 1);
+  flex-shrink: var(--vuuView-flex-shrink, 1);
+}
+
+.vuuView-collapsed .vuuView-main {
+  display: none;
+}
+
+.vuuView-collapsed + .Splitter {
+  display: none;
+}
+
+.vuuView-collapsed .Toolbar-vertical {
+  border-right: solid 1px var(--grey40);
+}
+
+.vuuView-collapsed .Toolbar-vertical .toolbar-title {
+  display: none;
+}

package/src/layout-view/View.tsx

@@ -0,0 +1,149 @@
+import { useForkRef, useIdMemo as useId } from "@heswell/uitk-core";
+import cx from "classnames";
+import React, { ForwardedRef, forwardRef, useMemo, useRef } from "react";
+import { Header } from "../layout-header/Header";
+import { registerComponent } from "../registry/ComponentRegistry";
+import { ViewContext } from "./ViewContext";
+import { ViewProps } from "./viewTypes";
+import { useView } from "./useView";
+import { useViewResize } from "./useViewResize";
+
+import "./View.css";
+
+const View = forwardRef(function View(
+  props: ViewProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
+  const {
+    children,
+    className,
+    collapsed, // "vertical" | "horizontal" | false | undefined
+    closeable,
+    "data-resizeable": dataResizeable,
+    dropTargets,
+    expanded,
+    flexFill, // use data-flexfill instead
+    id: idProp,
+    header,
+    orientation = "horizontal",
+    path,
+    resize = "responsive", // maybe throttle or debounce ?
+    resizeable = dataResizeable,
+    tearOut,
+    style = {},
+    title: titleProp,
+    ...restProps
+  } = props;
+
+  // A View within a managed layout will always be passed an id
+  const id = useId(idProp);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const mainRef = useRef<HTMLDivElement>(null);
+
+  const {
+    contributions,
+    dispatchViewAction,
+    load,
+    loadSession,
+    onConfigChange,
+    onEditTitle,
+    purge,
+    restoredState,
+    save,
+    saveSession,
+    title,
+  } = useView({
+    id,
+    rootRef,
+    path,
+    dropTargets,
+    title: titleProp,
+  });
+
+  useViewResize({ mainRef, resize, rootRef });
+
+  const classBase = "vuuView";
+
+  const getContent = () => {
+    // We only inject restored state as props if child is a single element. Maybe we
+    // should take this further and only do it if the component has opted into this
+    // behaviour.
+    if (React.isValidElement(children) && restoredState) {
+      return React.cloneElement(children, restoredState);
+    } else {
+      return children;
+    }
+  };
+
+  const viewContextValue = useMemo(
+    () => ({
+      dispatch: dispatchViewAction,
+      id,
+      path,
+      title,
+      load,
+      loadSession,
+      onConfigChange,
+      purge,
+      save,
+      saveSession,
+    }),
+    [
+      dispatchViewAction,
+      id,
+      load,
+      loadSession,
+      onConfigChange,
+      path,
+      purge,
+      save,
+      saveSession,
+      title,
+    ]
+  );
+
+  const headerProps = typeof header === "object" ? header : {};
+
+  return (
+    <div
+      {...restProps}
+      className={cx(classBase, className, {
+        [`${classBase}-collapsed`]: collapsed,
+        [`${classBase}-expanded`]: expanded,
+        [`${classBase}-resize-defer`]: resize === "defer",
+      })}
+      data-resizeable={resizeable}
+      id={id}
+      ref={useForkRef(forwardedRef, rootRef)}
+      style={style}
+      tabIndex={-1}
+    >
+      <ViewContext.Provider value={viewContextValue}>
+        {header ? (
+          <Header
+            {...headerProps}
+            collapsed={collapsed}
+            contributions={contributions}
+            expanded={expanded}
+            closeable={closeable}
+            onEditTitle={onEditTitle}
+            orientation={/*collapsed || */ orientation}
+            tearOut={tearOut}
+            // title={`${title} v${version} #${id}`}
+            title={title}
+          />
+        ) : null}
+        <div className={`${classBase}-main`} ref={mainRef}>
+          {getContent()}
+        </div>
+      </ViewContext.Provider>
+    </div>
+  );
+});
+View.displayName = "View";
+
+const MemoView = React.memo(View) as React.FunctionComponent<ViewProps>;
+MemoView.displayName = "View";
+registerComponent("View", MemoView, "view");
+
+export { MemoView as View };

package/src/layout-view/ViewContext.ts

@@ -0,0 +1,31 @@
+import path from "path";
+import React, { SyntheticEvent, useContext } from "react";
+import { ViewAction } from "./viewTypes";
+
+export type ViewDispatch = <Action extends ViewAction = ViewAction>(
+  action: Action,
+  evt?: SyntheticEvent
+) => Promise<boolean | void>;
+
+export interface ViewContextProps {
+  dispatch: ViewDispatch | null;
+  id: string;
+  load: (key?: string) => any;
+  loadSession: (key?: string) => any;
+  onConfigChange?: (config: any) => void;
+  path?: string;
+  purge: (key: string) => void;
+  save: (state: any, key: string) => void;
+  saveSession: (state: any, key: string) => void;
+  title?: string;
+}
+
+const NO_CONTEXT = { dispatch: null } as ViewContextProps;
+export const ViewContext = React.createContext<ViewContextProps>(NO_CONTEXT);
+
+export const useViewDispatch = () => {
+  const context = useContext(ViewContext);
+  return context?.dispatch ?? null;
+};
+
+export const useViewContext = () => useContext(ViewContext);

package/src/layout-view/index.ts

@@ -0,0 +1,4 @@
+export * from './ViewContext';
+export * from './View';
+export * from './useViewActionDispatcher';
+export * from './viewTypes';

package/src/layout-view/useView.tsx

@@ -0,0 +1,104 @@
+import { RefObject, useCallback, useMemo } from "react";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { usePersistentState } from "../use-persistent-state";
+import { useViewActionDispatcher } from "./useViewActionDispatcher";
+
+export interface ViewHookProps {
+  id: string;
+  rootRef: RefObject<HTMLDivElement>;
+  path?: string;
+  dropTargets?: string[];
+  title?: string;
+}
+
+export const useView = ({
+  id,
+  rootRef,
+  path,
+  dropTargets,
+  title: titleProp,
+}: ViewHookProps) => {
+  const layoutDispatch = useLayoutProviderDispatch();
+
+  const {
+    loadState,
+    loadSessionState,
+    purgeState,
+    saveState,
+    saveSessionState,
+  } = usePersistentState();
+
+  const [dispatchViewAction, contributions] = useViewActionDispatcher(
+    id,
+    rootRef,
+    path,
+    dropTargets
+  );
+
+  const title = useMemo(
+    () => loadState("view-title") ?? titleProp,
+    [loadState, titleProp]
+  );
+
+  const onEditTitle = useCallback(
+    (title: string) => {
+      if (path) {
+        layoutDispatch({ type: "set-title", path, title });
+      }
+    },
+    [layoutDispatch, path]
+  );
+
+  const restoredState = useMemo(() => loadState(id), [id, loadState]);
+
+  const load = useCallback(
+    (key?: string) => loadState(id, key),
+    [id, loadState]
+  );
+
+  const purge = useCallback(
+    (key) => {
+      purgeState(id, key);
+      layoutDispatch({ type: "save" });
+    },
+    [id, purgeState]
+  );
+
+  const save = useCallback(
+    (state, key) => {
+      saveState(id, key, state);
+      layoutDispatch({ type: "save" });
+    },
+    [id, layoutDispatch, saveState]
+  );
+  const loadSession = useCallback(
+    (key?: string) => loadSessionState(id, key),
+    [id, loadSessionState]
+  );
+  const saveSession = useCallback(
+    (state, key) => saveSessionState(id, key, state),
+    [id, saveSessionState]
+  );
+
+  const onConfigChange = useCallback(
+    ({ type: key, ...config }) => {
+      const { [key]: data } = config;
+      save(data, key);
+    },
+    [save]
+  );
+
+  return {
+    contributions,
+    dispatchViewAction,
+    load,
+    loadSession,
+    onConfigChange,
+    onEditTitle,
+    purge,
+    restoredState,
+    save,
+    saveSession,
+    title,
+  };
+};