Drag drop provider (#896)

* add DragDrop example, resume drag in DragProvider

* full flow for remote drag

* fix type issues

vuu-ui/packages/vuu-layout/src/drag-drop/BoxModel.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { rect } from "../common-types";
+import { boxContainsPoint } from "@finos/vuu-utils";
 import { LayoutModel } from "../layout-reducer";
 import { isContainer } from "../registry/ComponentRegistry";
 import { getProps, typeOf } from "../utils";
@@ -132,7 +132,7 @@ export function getPosition(
 
   if (targetOrientation === "row") {
     position = pctX < 0.5 ? WEST : EAST;
-  } else if (rect.header && containsPoint(rect.header, x, y)) {
+  } else if (rect.header && boxContainsPoint(rect.header, x, y)) {
     position = HEADER;
 
     if (rect.Stack) {
@@ -199,7 +199,7 @@ function getPositionWithinBox(
   pctY: number
 ) {
   const centerBox = getCenteredBox(rect, 0.2);
-  if (containsPoint(centerBox, x, y)) {
+  if (boxContainsPoint(centerBox, x, y)) {
     return CENTRE;
   } else {
     const quadrant = `${pctY < 0.5 ? "north" : "south"}${
@@ -474,7 +474,7 @@ function allBoxesContainingPoint(
 
   const type = typeOf(component) as string;
   const rect = measurements[path];
-  if (!containsPoint(rect, x, y)) return boxes;
+  if (!boxContainsPoint(rect, x, y)) return boxes;
 
   if (dropTargets && dropTargets.length) {
     if (dropTargets.includes(path)) {
@@ -494,7 +494,7 @@ function allBoxesContainingPoint(
     return boxes;
   }
 
-  if (rect.header && containsPoint(rect.header, x, y)) {
+  if (rect.header && boxContainsPoint(rect.header, x, y)) {
     return boxes;
   }
 
@@ -520,12 +520,6 @@ function allBoxesContainingPoint(
   return boxes;
 }
 
-function containsPoint(rect: rect, x: number, y: number) {
-  if (rect) {
-    return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
-  }
-}
-
 function scrollIntoViewIfNeccesary(
   { top, bottom, scrolling }: DragDropRect,
   x: number,

vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts

@@ -1,5 +1,5 @@
+import { rect } from "@finos/vuu-utils";
 import { ReactElement } from "react";
-import { rect } from "../common-types";
 import { LayoutModel } from "../layout-reducer";
 import { findTarget, followPath, getProps } from "../utils";
 import { BoxModel, Measurements, Position } from "./BoxModel";

vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts

@@ -1,4 +1,4 @@
-import { rect, rectTuple } from "../common-types";
+import { rect, rectTuple } from "@finos/vuu-utils";
 import { LayoutModel } from "../layout-reducer";
 import { getProps, typeOf } from "../utils";
 import {

vuu-ui/packages/vuu-layout/src/drag-drop/dragDropTypes.ts

@@ -1,4 +1,4 @@
-import type { rect } from '../common-types';
+import type { rect } from "@finos/vuu-utils";
 export interface DragDropRect extends rect {
   children?: DragDropRect[];
   header?: {
@@ -28,7 +28,7 @@ export interface DropPosition {
   West: boolean;
 }
 
-export type RelativePosition = 'after' | 'before';
+export type RelativePosition = "after" | "before";
 
 export type DropPosTab = {
   index: number;

vuu-ui/packages/vuu-layout/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./dock-layout";
-export * from "./common-types";
 export { default as Component } from "./Component";
 export * from "./drag-drop";
 export * from "./DraggableLayout";

vuu-ui/packages/vuu-layout/src/layout-reducer/flexUtils.ts

@@ -1,6 +1,5 @@
-import { uuid } from "@finos/vuu-utils";
+import { dimension, rect, rectTuple, uuid } from "@finos/vuu-utils";
 import React, { CSSProperties, ReactElement, ReactNode } from "react";
-import { dimension, rect, rectTuple } from "../common-types";
 import { DropPos } from "../drag-drop/dragDropTypes";
 import { ComponentRegistry } from "../registry/ComponentRegistry";
 import { getProps, resetPath } from "../utils";
@@ -91,13 +90,14 @@ export function getFlexStyle(
 }
 
 export function hasUnboundedFlexStyle(component: ReactElement) {
-  const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } = component.props;
+  const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } =
+    component.props;
   if (typeof flex === "number") {
     return true;
-  } 
+  }
   if (flexBasis === 0 && flexGrow === 1 && flexShrink === 1) {
     return true;
-  } 
+  }
   if (typeof flexBasis === "number") {
     return false;
   }
@@ -212,11 +212,14 @@ export function wrapIntrinsicSizeComponentWithFlexbox(
   );
 }
 
-const getFlexValue = (flexBasis: number, flexFill: boolean): number | undefined => {
+const getFlexValue = (
+  flexBasis: number,
+  flexFill: boolean
+): number | undefined => {
   if (flexFill) {
     return undefined;
   }
-  return flexBasis === 0 ? 1 : 0
+  return flexBasis === 0 ? 1 : 0;
 };
 
 export function createFlexbox(

vuu-ui/packages/vuu-layout/src/layout-reducer/insert-layout-element.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { uuid } from "@finos/vuu-utils";
+import { rectTuple, uuid } from "@finos/vuu-utils";
 import React, { ReactElement } from "react";
-import { rectTuple } from "../common-types";
 import { DropPos } from "../drag-drop";
 import { DropTarget } from "../drag-drop/DropTarget";
 import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils";
@@ -11,7 +10,7 @@ import {
   getFlexDimensions,
   getFlexOrIntrinsicStyle,
   getIntrinsicSize,
-  wrapIntrinsicSizeComponentWithFlexbox
+  wrapIntrinsicSizeComponentWithFlexbox,
 } from "./flexUtils";
 import { LayoutModel } from "./layoutTypes";
 import { getManagedDimension, LayoutProps } from "./layoutUtils";
@@ -325,12 +324,14 @@ function getStyledComponents(
   newComponent: ReactElement,
   targetRect: DropTarget["clientRect"]
 ): [ReactElement, ReactElement] {
-  const id = uuid()
+  const id = uuid();
   let { version = 0 } = getProps(newComponent);
   version += 1;
   if (typeOf(container) === "Flexbox") {
     const [dim] = getManagedDimension(container.props.style);
     const splitterSize = 6;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     const size = { [dim]: (targetRect[dim] - splitterSize) / 2 };
     const existingComponentStyle = getFlexOrIntrinsicStyle(
       existingComponent,

vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { uuid } from "@finos/vuu-utils";
+import { dimension, uuid } from "@finos/vuu-utils";
 import React, { cloneElement, CSSProperties, ReactElement } from "react";
-import { dimension } from "../common-types";
 import {
   ComponentWithId,
   ComponentRegistry,

vuu-ui/packages/vuu-layout/src/layout-reducer/resize-flex-children.ts

@@ -1,5 +1,5 @@
+import { dimension } from "@finos/vuu-utils";
 import React, { CSSProperties, ReactElement } from "react";
-import { dimension } from "../common-types";
 import { followPath, getProps } from "../utils";
 import { LayoutResizeAction, SplitterResizeAction } from "./layoutTypes";
 import { swapChild } from "./replace-layout-element";

vuu-ui/packages/vuu-layout/src/layout-reducer/wrap-layout-element.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { uuid } from "@finos/vuu-utils";
+import { rectTuple, uuid } from "@finos/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";
@@ -12,7 +11,7 @@ import {
   flexDirection,
   getFlexStyle,
   getIntrinsicSize,
-  wrapIntrinsicSizeComponentWithFlexbox
+  wrapIntrinsicSizeComponentWithFlexbox,
 } from "./flexUtils";
 import { LayoutModel } from "./layoutTypes";
 import { applyLayoutProps, LayoutProps } from "./layoutUtils";

vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.css

@@ -3,7 +3,7 @@
     --overflow-direction: row; 
     --overflow-width: 0px;
     --border-size: calc((var(--overflow-container-height) - 24px) / 2);
-    background-color: var(--vuuOverflowContainer-background, black);
+    background-color: var(--vuuOverflowContainer-background);
     height: var(--overflow-container-height);
 }
 

vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.tsx

@@ -57,6 +57,10 @@ const WrapContainer = React.memo(
       orientation,
     });
 
+    console.log(
+      `Overflow container WRAPPER ${React.Children.count(children)} children`
+    );
+
     const height = orientation === "vertical" ? "100%" : `${heightProp}px`;
     // TODO measure the height, if not provided
     const style = {
@@ -137,6 +141,9 @@ export const OverflowContainer = forwardRef(function OverflowContainer(
   forwardedRef: ForwardedRef<HTMLDivElement>
 ) {
   const id = useId(idProp);
+
+  console.log(`Overflow container ${React.Children.count(children)} children`);
+
   return (
     <div
       {...htmlAttributes}

vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts

@@ -107,7 +107,10 @@ export const useOverflowContainer = ({
     let currentSize = 0;
     return new ResizeObserver((entries: ResizeObserverEntry[]) => {
       for (const entry of entries) {
-        const { [sizeProp]: size } = entry.contentRect;
+        const { [sizeProp]: actualSize } = entry.contentRect;
+        // This is important. Sometimes tiny sub-pixel differeces
+        // can be reported, which break the layout assumptions
+        const size = Math.round(actualSize as number);
         if (isValidNumber(size) && currentSize !== size) {
           currentSize = size;
           handleResize();

vuu-ui/packages/vuu-layout/src/palette/Palette.tsx

@@ -54,7 +54,10 @@ export const PaletteItem = memo(
 PaletteItem.displayName = "PaletteItem";
 
 export interface PaletteProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    "onDragStart" | "onDrop" | "onSelect"
+  > {
   children: ReactElement[];
   itemHeight?: number;
   orientation: "horizontal" | "vertical";

vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx

@@ -3,7 +3,10 @@ import { TableProps } from "@finos/vuu-table";
 import { isGroupColumn, metadataKeys, notHidden } from "@finos/vuu-utils";
 import cx from "classnames";
 import { CSSProperties, useEffect, useRef } from "react";
-import { GroupHeaderCell, HeaderCell } from "./header-cell";
+import {
+  GroupHeaderCellNext as GroupHeaderCell,
+  HeaderCell,
+} from "./header-cell";
 import { Row as DefaultRow } from "./Row";
 import { useTable } from "./useTableNext";
 import { MeasuredContainer, useId } from "@finos/vuu-layout";

vuu-ui/packages/vuu-table/src/table-next/header-cell/GroupHeaderCellNext.tsx

@@ -8,12 +8,23 @@ import { ColumnResizer, useTableColumnResize } from "../column-resizing";
 import { HeaderCellProps } from "./HeaderCell";
 import { useCell } from "../useCell";
 import { ColumnHeaderPill, GroupColumnPill } from "../column-header-pill";
-import { OverflowContainer } from "@finos/vuu-layout";
+import { OverflowContainer, useLayoutEffectSkipFirst } from "@finos/vuu-layout";
 
 import "./GroupHeaderCell.css";
 
 const classBase = "vuuTableNextGroupHeaderCell";
 
+const switchIfChanged = (
+  columns: KeyedColumnDescriptor[],
+  newColumns: KeyedColumnDescriptor[]
+) => {
+  if (columns === newColumns) {
+    return columns;
+  } else {
+    return newColumns;
+  }
+};
+
 export interface GroupHeaderCellNextProps
   extends Omit<HeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
   column: GroupColumnDescriptor;
@@ -27,7 +38,6 @@ export const GroupHeaderCellNext = ({
   onResize,
   ...htmlAttributes
 }: GroupHeaderCellNextProps) => {
-  console.log({ groupColumn });
   const rootRef = useRef<HTMLTableCellElement>(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
     column: groupColumn,
@@ -36,9 +46,7 @@ export const GroupHeaderCellNext = ({
   });
 
   const [columns, setColumns] = useState(groupColumn.columns);
-
   const { className, style } = useCell(groupColumn, classBase, true);
-
   const columnPillProps =
     columns.length > 1
       ? {
@@ -47,8 +55,7 @@ export const GroupHeaderCellNext = ({
         }
       : undefined;
 
-  const handleDrop = useCallback((fromIndex, toIndex) => {
-    console.log(`handle drop from ${fromIndex} to ${toIndex}`);
+  const handleMoveItem = useCallback((fromIndex, toIndex) => {
     setColumns((cols) => {
       const newCols = cols.slice();
       const [tab] = newCols.splice(fromIndex, 1);
@@ -61,6 +68,10 @@ export const GroupHeaderCellNext = ({
     });
   }, []);
 
+  useLayoutEffectSkipFirst(() => {
+    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
+  }, [groupColumn.columns]);
+
   return (
     <div
       {...htmlAttributes}
@@ -75,7 +86,7 @@ export const GroupHeaderCellNext = ({
         allowDragDrop
         className={`${classBase}-inner`}
         height={24}
-        onMoveItem={handleDrop}
+        onMoveItem={handleMoveItem}
         overflowPosition="start"
       >
         {columns.map((column) => {