WIP

Author: heswell

vuu-ui/packages/vuu-layout/src/drag-drop-next/DragContextNext.tsx

@@ -40,6 +40,7 @@ export type DropHandler<T extends DragSource = DragSource> = (
 export class DragContext {
   #dragElementHeight?: number;
   #dragElementWidth?: number;
+  #dragLabelWidth?: number;
   #dragSource?: DragSource;
   #dragSources: Map<string, DragSourceDescriptor> = new Map();
   #detachTabHandler: DetachTabHandler = () =>

vuu-ui/packages/vuu-layout/src/drag-drop-next/DragDropProviderNext.css

@@ -44,7 +44,7 @@
     }
 
     .vuuDraggableItem-animating {
-        transition: transform .3s ease-in-out;
+        transition: transform .2s ease-in-out;
     }
 
     .SpaceMan {

vuu-ui/packages/vuu-layout/src/drag-drop-next/SpaceMan.tsx

@@ -18,6 +18,7 @@ export class SpaceMan {
   #sizeProperty: "height" | "width";
   #spacer1 = this.createDragSpacer();
   #spacer2 = this.createDragSpacer();
+  // TODO do we still need this state
   #state: State = "initial";
   #toDirection: Direction | undefined;
   #toIndex: string | number | undefined = undefined;
@@ -33,22 +34,15 @@ export class SpaceMan {
     this.#sizeProperty = orientation === "horizontal" ? "width" : "height";
   }
 
-  get fromIndex() {
-    return asInteger(this.#fromIndex);
-  }
-  get toIndex() {
-    return asInteger(this.#toIndex);
-  }
-
   get mouseOffset() {
     return this.#mouseOffset;
   }
   set mouseOffset(offset: { x: number; y: number }) {
     this.#mouseOffset = offset;
   }
 
-  get dropPosition(): DropPosition {
-    console.log("[SpaceMan] get dropPosition");
+  get dropPosition(): DropPosition | undefined {
+    // console.log("[SpaceMan] get dropPosition");
     const dropTargetSpacer = this.#dragContainer?.querySelector(
       '[data-drop-target="true"]',
     );
@@ -70,10 +64,8 @@ export class SpaceMan {
       }
 
       throw Error(
-        `[[SpaceMan] dropPosition] no dropTarget with data-drop-target attribute found`,
+        `[[SpaceMan] (getter) dropPosition] no dropTarget with data-drop-target attribute found`,
       );
-    } else {
-      throw Error(`[SpaceMan] dropPosition no dropTarget spacer found`);
     }
   }
 
@@ -99,10 +91,10 @@ export class SpaceMan {
     this.#withinDragContainer = false;
     this.#state = "away";
     this.setSpacerSizes(0, 0);
-    //TODO don't think we really want a timeout here
+    //TODO is the timeout just to allow the spacer rezuse to animate ?
+    // seems to work without it
     setTimeout(() => {
       // TODO deal with situation where item re-enters before this happens
-      console.log(`[SPaceMan timeout:300 leaveDragContainer]`);
       this.clearSpacers();
     }, 200);
   }
@@ -259,8 +251,8 @@ export class SpaceMan {
     this.#spacer2.style[propertyName] = "0px";
   }
 
-  private cleanup() {
-    console.log("[SpaceMan] cleanup");
+  cleanup() {
+    console.log(`[SpaceMan#${this.id}] cleanup`);
     this.clearSpacers();
 
     if (this.#dragItem) {
@@ -275,6 +267,9 @@ export class SpaceMan {
 
   drop(x: number, y: number): Promise<void> {
     // TODO dragItem should be passed in
+    console.log(`[SpaceMan#${this.id}] drop, returns a promise`, {
+      dragItem: this.#dragItem,
+    });
     return new Promise((resolve) => {
       if (this.#dragItem) {
         const dragItem = this.#dragItem;

vuu-ui/packages/vuu-layout/src/drag-drop-next/drag-drop-listeners.ts

@@ -62,6 +62,11 @@ export function initializeDragContainer(
 
     if (element) {
       const tabsContainer = queryClosest(e.target, ".vuuDragContainer", true);
+      const gridLayoutItem = queryClosest(
+        tabsContainer,
+        ".vuuGridLayoutItem",
+        true,
+      );
       const tabIndex = getDataIndex(element);
       const label = getDataLabel(element);
       const isSelectedTab =
@@ -70,44 +75,57 @@ export function initializeDragContainer(
       const { gridLayoutItemId } = element.dataset;
       e.stopPropagation();
       dragContext.beginDrag(e, {
-        id: gridLayoutItemId ?? "",
         element,
         isSelectedTab,
-        label,
+        tab: { id: gridLayoutItemId ?? "", label },
         tabIndex,
-        tabsId: tabsContainer.id,
+        tabsId: gridLayoutItem.id,
         type: "tabbed-component",
       });
 
       requestAnimationFrame(() => {
         spaceMan.dragStart(tabIndex);
-        const gridLayoutItem = queryClosest(
-          tabsContainer,
-          ".vuuGridLayoutItem",
-        );
-        if (gridLayoutItem) {
-          dragContext.detachTab(gridLayoutItem.id, tabIndex, label);
-        }
+        dragContext.detachTab(gridLayoutItem.id, tabIndex, label);
       });
     }
   };
 
   const onDragEnter = (e: DragEvent) => {
-    // console.log(`[drag-drop-listeners] onDragEnter`);
-    // don't think we need this check. DragEnter wouldn't be firing
-    // if we weren't in a drop zone
-    e.stopPropagation();
     // we should really mark drop targets
     const dropTarget = getDraggableEl(e.target);
+    console.log(`[drag-drop-listeners] onDragEnter`, {
+      target: e.target,
+      dropTarget,
+    });
+    // We always revent default here, that way useAsDropItem will know that another drag handler
+    // is responsible for this area
+    e.preventDefault();
     const { dragSource, x, y } = dragContext;
-    if (dropTarget && sourceIsTabbedComponent(dragSource)) {
+    if (dropTarget) {
+      console.log(
+        `[drag-drop-listeners] onDragEnter ${dropTarget.className} preventDefault`,
+      );
       const indexOfDropTarget = getDataIndex(dropTarget);
+      if (sourceIsTabbedComponent(dragSource)) {
+        if (
+          indexOfDropTarget !== -1 &&
+          (indexOfDropTarget !== dragSource?.tabIndex ||
+            isRemoteContainer(dragSource.element, dropTarget))
+        ) {
+          const direction =
+            orientation === "horizontal"
+              ? e.clientX > x
+                ? "fwd"
+                : "bwd"
+              : e.clientY > y
+                ? "fwd"
+                : "bwd";
+
+          spaceMan.dragEnter(indexOfDropTarget, direction);
+        }
+      } else {
+        console.log(`draging a componnet over a tabstrip`);
 
-      if (
-        indexOfDropTarget !== -1 &&
-        (indexOfDropTarget !== dragSource?.tabIndex ||
-          isRemoteContainer(dragSource.element, dropTarget))
-      ) {
         const direction =
           orientation === "horizontal"
             ? e.clientX > x
@@ -129,35 +147,55 @@ export function initializeDragContainer(
   };
 
   const onDragLeave = (e: DragEvent) => {
-    // TODO include container #id in query
-    const container = queryClosest(e.relatedTarget, ".vuuDragContainer");
+    console.log(`[drag-drop-listeners] onDragleave ${spaceMan.id}`);
+    // Have we dragged the draggable item right out of the parent drag container
+    const container = queryClosest(e.relatedTarget, `#${spaceMan.id}`);
     if (container === null) {
       spaceMan.leaveDragContainer();
     }
   };
 
   const onDrop = async (e: DragEvent) => {
-    const { clientX, clientY } = e;
-    e.stopPropagation();
-    // console.log(
-    //   `[drag-drop-listeners] onDrop toIndex: ${spaceMan.toIndex}
-    //    ${dropPosition.position} targetTabId ${dropPosition.target}`,
-    // );
-    // important we capture this before calling spaceMan.drop
-    const { dropPosition } = spaceMan;
-    await spaceMan.drop(clientX, clientY);
-    dragContext.drop({
-      toId: dragId,
-      tabsId: dragId,
-      dropPosition,
-    });
+    if (e.defaultPrevented) {
+      console.log(`[drag-drop-listeners] onDrop ${dragId} - already handled`);
+      spaceMan.cleanup();
+    } else {
+      const { clientX, clientY } = e;
+      e.stopPropagation();
 
-    if (dragContext.dragSource) {
-      focusDroppedTab(dragId, dragContext.dragSource.label);
+      // important we capture this before calling spaceMan.drop
+      const { dropPosition } = spaceMan;
+
+      console.log(
+        `[drag-drop-listeners] onDrop #${dragId}  ${dropPosition?.position} targetTabId ${dropPosition?.target}`,
+      );
+      if (dropPosition) {
+        await spaceMan.drop(clientX, clientY);
+        dragContext.drop({
+          toId: dragId,
+          tabsId: dragId,
+          dropPosition,
+        });
+
+        if (dragContext.dragSource) {
+          focusDroppedTab(dragId, dragContext.dragSource.label);
+        }
+      } else {
+        console.log(`[drag-drop-listeners] onDrop, drop is elsewhere `);
+        spaceMan.cleanup();
+      }
     }
   };
   const onDragEnd = () => {
-    console.log("[drag-drop-listeners] onDragEnd");
+    console.log(`[drag-drop-listeners#${dragId}] onDragEnd`, {
+      dragSource: dragContext.dragSource,
+    });
+    if (
+      sourceIsTabbedComponent(dragContext.dragSource) &&
+      dragContext.dragSource.tabsId === dragId
+    ) {
+      console.log(`[drag-drop-listeners#${dragId}] do we need to cleanup`);
+    }
     if (!dragContext.dropped) {
       spaceMan.dragEnd();
     }
@@ -180,17 +218,17 @@ export function initializeDragContainer(
   containerEl?.addEventListener("dragenter", onDragEnter);
   containerEl?.addEventListener("dragleave", onDragLeave);
   containerEl?.addEventListener("dragover", onDragOver);
-  containerEl?.addEventListener("drop", onDrop);
-  containerEl?.addEventListener("dragend", onDragEnd);
+  document.body.addEventListener("drop", onDrop);
+  document.body.addEventListener("dragend", onDragEnd);
 
   function cleanUp() {
     containerEl?.removeEventListener("mousedown", onMouseDown);
     containerEl?.removeEventListener("dragstart", onDragStart);
     containerEl?.removeEventListener("dragenter", onDragEnter);
     containerEl?.removeEventListener("dragleave", onDragLeave);
     containerEl?.removeEventListener("dragover", onDragOver);
-    containerEl?.removeEventListener("drop", onDrop);
-    containerEl?.removeEventListener("dragend", onDragEnd);
+    document.body.removeEventListener("drop", onDrop);
+    document.body.removeEventListener("dragend", onDragEnd);
   }
 
   return cleanUp;

vuu-ui/packages/vuu-layout/src/grid-layout/GridLayout.css

@@ -49,9 +49,10 @@
   cursor: grab;
   display: flex;
   flex: 0 0 var(--vuu-grid-header-height);
-  inset: var(--vuu-grid-gap) var(--vuu-grid-gap) auto var(--vuu-grid-gap);
+  /* inset: var(--vuu-grid-gap) var(--vuu-grid-gap) auto var(--vuu-grid-gap); */
   height: var(--vuu-grid-header-height);
   padding: 0 var(--salt-spacing-100) 0 0;
+  position: relative;
 
   [data-align="right"] {
     margin-left: auto;
@@ -77,7 +78,7 @@
 }
 
 .vuuGridLayoutItem-stacked {
-  margin-top: var(--vuu-layout-tabs-height);
+  margin-top: var(--vuu-layout-tabs-height)
 }
 
 .vuuGridLayoutItemHeader-close {
@@ -161,4 +162,16 @@
   transition-timing-function: ease-in-out;
   z-index: 100;
 }
+.vuuDropTarget-header:after {
+  background-color: cornflowerblue;
+  content: "";
+  inset: 0px;
+  opacity: 0.3;
+  pointer-events: none;
+  position: absolute;
+  transition-property: top, left, right, bottom;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  z-index: 100;
+}
 

vuu-ui/packages/vuu-layout/src/grid-layout/GridLayout.tsx

@@ -8,12 +8,7 @@ import { useIdMemo } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
-import {
-  CSSProperties,
-  HTMLAttributes,
-  ReactElement,
-  useCallback,
-} from "react";
+import { CSSProperties, HTMLAttributes, ReactElement } from "react";
 import { DragDropProviderNext } from "../drag-drop-next/DragDropProviderNext";
 import gridLayoutCss from "./GridLayout.css";
 import { GridLayoutContext } from "./GridLayoutContext";
@@ -122,6 +117,7 @@ export const GridLayout = ({
 
   console.log(`GridLayout #${id}`, {
     children,
+    stackedItems,
   });
 
   return (

vuu-ui/packages/vuu-layout/src/grid-layout/GridLayoutContext.ts

@@ -1,6 +1,6 @@
-import { createContext, Dispatch, useContext } from "react";
+import { createContext, Dispatch, DragEvent, useContext } from "react";
 import { GridLayoutDragEndHandler } from "./GridLayoutProvider";
-import { GridModel } from "./GridModel";
+import { GridModel, TabStateTab } from "./GridModel";
 import { GridLayoutDragStartHandler } from "./useDraggable";
 import { GridLayoutModel } from "./GridLayoutModel";
 import { GridLayoutDropPosition } from "@finos/vuu-utils";
@@ -39,9 +39,9 @@ const unconfiguredGridLayoutDispatch: GridLayoutDispatch = (action) =>
  */
 export interface TabbedComponentDragSource {
   element: HTMLElement;
-  id: string;
   isSelectedTab: boolean;
-  label: string;
+  tab: TabStateTab;
+  /** deprecated */
   tabIndex: number;
   tabsId: string;
   type: "tabbed-component";
@@ -51,6 +51,7 @@ export interface TabbedComponentDragSource {
  */
 export interface ComponentDragSource {
   element: HTMLElement;
+  dragElement?: HTMLElement;
   id: string;
   label: string;
   type: "component";
@@ -66,6 +67,8 @@ export interface TemplateDragSource {
   type: "template";
 }
 
+export type DragSourceProvider = (evt: DragEvent<Element>) => DragSource;
+
 export type DragSource =
   | ComponentDragSource
   | TemplateDragSource