@vuu-ui/vuu-layout 0.0.27

package/src/drag-drop/DropTarget.ts

@@ -0,0 +1,392 @@
+import { ReactElement } from "react";
+import {
+  BoxModel,
+  positionValues,
+  getPosition,
+  Position,
+  RelativeDropPosition,
+  Measurements,
+} from "./BoxModel";
+import { getProps, typeOf } from "../utils";
+import { DragDropRect, DropPos, DropPosTab } from "./dragDropTypes";
+import { LayoutModel } from "../layout-reducer";
+import { DragState } from "./DragState";
+import { rect, rectTuple } from "../common-types";
+
+export const isTabstrip = (dropTarget: DropTarget) =>
+  dropTarget.pos.tab &&
+  typeOf(dropTarget.component) === "Stack" &&
+  dropTarget.pos.position.Header;
+
+const { north, south, east, west } = positionValues;
+const eastwest = east + west;
+const northsouth = north + south;
+
+export interface DropTargetProps {
+  component: LayoutModel;
+  pos: DropPos;
+  clientRect: DragDropRect;
+  nextDropTarget: DropTarget | null;
+}
+
+export type GuideLine = [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number
+];
+export interface TargetDropOutline {
+  l: number;
+  r: number;
+  t: number;
+  b: number;
+  tabLeft?: number;
+  tabWidth?: number;
+  tabHeight?: number;
+  guideLines?: GuideLine;
+}
+
+export class DropTarget {
+  private active: boolean;
+
+  public box: any;
+  public clientRect: DragDropRect;
+  public component: LayoutModel;
+  public dropRect: rectTuple | undefined;
+  public nextDropTarget: DropTarget | null;
+  public pos: DropPos;
+
+  constructor({
+    component,
+    pos,
+    clientRect /*, closeToTheEdge*/,
+    nextDropTarget,
+  }: DropTargetProps) {
+    this.component = component;
+    this.pos = pos;
+    this.clientRect = clientRect;
+    this.nextDropTarget = nextDropTarget;
+    this.active = false;
+    this.dropRect = undefined;
+  }
+
+  targetTabPos(tab: DropPosTab) {
+    const { left: tabLeft, width: tabWidth, positionRelativeToTab } = tab;
+    return positionRelativeToTab === RelativeDropPosition.BEFORE
+      ? tabLeft
+      : tabLeft + tabWidth;
+  }
+
+  /**
+   * Determine what will be rendered by the dropTargetRenderer
+   *
+   * @param {*} lineWidth
+   * @param {*} dragState
+   * @returns {l, t, r, b, tabLeft, tabWidth, tabHeight}
+   */
+  getTargetDropOutline(
+    lineWidth: number,
+    dragState?: DragState
+  ): TargetDropOutline {
+    if (this.pos.tab) {
+      return this.getDropTabOutline(lineWidth, this.pos.tab);
+    } else if (dragState && dragState.hasIntrinsicSize()) {
+      return this.getIntrinsicDropRect(dragState);
+    } else {
+      const [l, t, r, b] = this.getDropRectOutline(
+        lineWidth,
+        dragState
+      ) as rectTuple;
+      return { l, t, r, b };
+    }
+  }
+
+  getDropTabOutline(lineWidth: number, tab: DropPosTab): TargetDropOutline {
+    const {
+      clientRect: { top, left, right, bottom, header },
+    } = this;
+
+    const inset = 0;
+    const gap = Math.round(lineWidth / 2) + inset;
+
+    const t = Math.round(top);
+    const l = Math.round(left + gap);
+    const r = Math.round(right - gap);
+    const b = Math.round(bottom - gap);
+    const tabLeft = this.targetTabPos(tab);
+    const tabWidth = 60; // should really measure text
+    const tabHeight = header!.bottom - header!.top;
+    return { l, t, r, b, tabLeft, tabWidth, tabHeight };
+  }
+
+  getIntrinsicDropRect(dragState: DragState): TargetDropOutline {
+    const { pos, clientRect: rect } = this;
+
+    let { x, y } = dragState;
+
+    let height = dragState.intrinsicSize?.height ?? 0;
+    let width = dragState.intrinsicSize?.height ?? 0;
+
+    if (height && height > rect.height) {
+      console.log(`DropTarget: we're going to blow the gaff`);
+      height = rect.height;
+    } else if (width && width > rect.width) {
+      console.log(`DropTarget: we're going to blow the gaff`);
+      width = rect.width;
+    }
+
+    const left = Math.min(
+      rect.right - width,
+      Math.max(rect.left, Math.round(pos.x - x.mousePct * width))
+    );
+    const top = Math.min(
+      rect.bottom - height,
+      Math.max(rect.top, Math.round(pos.y - y.mousePct * height))
+    );
+    const [l, t, r, b] = (this.dropRect = [
+      left,
+      top,
+      left + width,
+      top + height,
+    ]);
+
+    const guideLines: GuideLine = pos.position.EastOrWest
+      ? [l, rect.top, l, rect.bottom, r, rect.top, r, rect.bottom]
+      : [rect.left, t, rect.right, t, rect.left, b, rect.right, b];
+
+    return { l, r, t, b, guideLines };
+  }
+
+  /**
+   * @returns  [left, top, right, bottom]
+   */
+  getDropRectOutline(lineWidth: number, dragState?: DragState) {
+    const { pos, clientRect: rect } = this;
+    const { width: suggestedWidth, height: suggestedHeight, position } = pos;
+
+    const { width: intrinsicWidth, height: intrinsicHeight } =
+      dragState?.intrinsicSize ?? {};
+    const sizeHeight = intrinsicHeight ?? suggestedHeight ?? 0;
+    const sizeWidth = intrinsicWidth ?? suggestedWidth ?? 0;
+
+    this.dropRect = undefined;
+
+    const { top: t, left: l, right: r, bottom: b } = rect;
+
+    const inset = 0;
+    const gap = Math.round(lineWidth / 2) + inset;
+
+    switch (position) {
+      case Position.North:
+      case Position.Header: {
+        const halfHeight = Math.round((b - t) / 2);
+        const height = sizeHeight
+          ? Math.min(halfHeight, Math.round(sizeHeight))
+          : halfHeight;
+        return sizeWidth && l + sizeWidth < r
+          ? [l + gap, t + gap, l + sizeWidth - gap, t + gap + height] // need flex direction indicator
+          : [l + gap, t + gap, r - gap, t + gap + height];
+      }
+      case Position.West: {
+        const halfWidth = Math.round((r - l) / 2);
+        const width = sizeWidth
+          ? Math.min(halfWidth, Math.round(sizeWidth))
+          : halfWidth;
+        return sizeHeight && t + sizeHeight < b
+          ? [l + gap, t + gap, l - gap + width, t + sizeHeight + gap] // need flex direction indicator
+          : [l + gap, t + gap, l - gap + width, b - gap];
+      }
+      case Position.East: {
+        const halfWidth = Math.round((r - l) / 2);
+        const width = sizeWidth
+          ? Math.min(halfWidth, Math.round(sizeWidth))
+          : halfWidth;
+        return sizeHeight && t + sizeHeight < b
+          ? [r - gap - width, t + gap, r - gap, t + sizeHeight + gap] // need flex direction indicator
+          : [r - gap - width, t + gap, r - gap, b - gap];
+      }
+      case Position.South: {
+        const halfHeight = Math.round((b - t) / 2);
+        const height = sizeHeight
+          ? Math.min(halfHeight, Math.round(sizeHeight))
+          : halfHeight;
+
+        return sizeWidth && l + sizeWidth < r
+          ? [l + gap, b - gap - height, l + sizeWidth - gap, b - gap] // need flex direction indicator
+          : [l + gap, b - gap - height, r - gap, b - gap];
+      }
+      case Position.Centre: {
+        return [l + gap, t + gap, r - gap, b - gap];
+      }
+      default:
+        console.warn(`DropTarget does not recognize position ${position}`);
+        return null;
+    }
+  }
+
+  activate() {
+    this.active = true;
+    return this;
+  }
+
+  toArray(this: DropTarget) {
+    let dropTarget: DropTarget | null = this;
+    const dropTargets = [dropTarget];
+    // eslint-disable-next-line no-cond-assign
+    while ((dropTarget = dropTarget.nextDropTarget)) {
+      dropTargets.push(dropTarget);
+    }
+    return dropTargets;
+  }
+
+  static getActiveDropTarget(dropTarget: DropTarget | null): DropTarget | null {
+    return dropTarget === null
+      ? null
+      : dropTarget?.active
+      ? dropTarget
+      : DropTarget.getActiveDropTarget(dropTarget.nextDropTarget);
+  }
+}
+
+// Initial entry to this method is always via the app (may be it should be *on* the app)
+export function identifyDropTarget(
+  x: number,
+  y: number,
+  rootLayout: LayoutModel,
+  measurements: Measurements,
+  intrinsicSize?: number,
+  validDropTargets?: string[]
+) {
+  let dropTarget = null;
+
+  var allBoxesContainingPoint = BoxModel.allBoxesContainingPoint(
+    rootLayout,
+    measurements,
+    x,
+    y,
+    validDropTargets
+  );
+
+  if (allBoxesContainingPoint.length) {
+    const [component, ...containers] = allBoxesContainingPoint;
+    const {
+      "data-path": dataPath,
+      path = dataPath,
+      "data-row-placeholder": isRowPlaceholder,
+    } = getProps(component);
+    const clientRect = measurements[path];
+    const placeholderOrientation =
+      intrinsicSize && isRowPlaceholder ? "row" : undefined;
+    const pos = getPosition(x, y, clientRect, placeholderOrientation);
+    const box = measurements[path];
+
+    function nextDropTarget([nextTarget, ...targets]: LayoutModel[]):
+      | DropTarget
+      | undefined {
+      if (pos.position?.Header || pos.closeToTheEdge) {
+        const targetPosition = getTargetPosition(
+          nextTarget,
+          pos,
+          box,
+          measurements,
+          x,
+          y
+        );
+        if (targetPosition) {
+          const [containerPos, clientRect] = targetPosition;
+
+          return new DropTarget({
+            component: nextTarget,
+            pos: containerPos,
+            clientRect,
+            nextDropTarget: nextDropTarget(targets) ?? null,
+          });
+        } else if (targets.length) {
+          return nextDropTarget(targets);
+        }
+      }
+    }
+    dropTarget = new DropTarget({
+      component,
+      pos,
+      clientRect,
+      nextDropTarget: nextDropTarget(containers) ?? null,
+    }).activate();
+  }
+  return dropTarget;
+}
+
+function getTargetPosition(
+  container: LayoutModel,
+  { closeToTheEdge, position }: DropPos,
+  box: rect,
+  measurements: Measurements,
+  x: number,
+  y: number
+): [DropPos, DragDropRect] | undefined {
+  if (!container || container.type === "DraggableLayout") {
+    return;
+  }
+
+  const containingBox = measurements[container.props.path];
+  const closeToTop = closeToTheEdge & positionValues.north;
+  const closeToRight = closeToTheEdge & positionValues.east;
+  const closeToBottom = closeToTheEdge & positionValues.south;
+  const closeToLeft = closeToTheEdge & positionValues.west;
+
+  const atTop =
+    (closeToTop || position.Header) &&
+    Math.round(box.top) === Math.round(containingBox.top);
+  const atRight =
+    closeToRight && Math.round(box.right) === Math.round(containingBox.right);
+  const atBottom =
+    closeToBottom &&
+    Math.round(box.bottom) === Math.round(containingBox.bottom);
+  const atLeft =
+    closeToLeft && Math.round(box.left) === Math.round(containingBox.left);
+
+  if (atTop || atRight || atBottom || atLeft) {
+    const { "data-path": dataPath, path = dataPath } = container.props;
+    const clientRect = measurements[path];
+    let containerPos = getPosition(x, y, clientRect);
+
+    // if its a VBox and we're close to left or right ...
+    if (
+      (isVBox(container) || isTabbedContainer(container)) &&
+      closeToTheEdge & eastwest
+    ) {
+      containerPos.width = 120;
+      return [containerPos, clientRect];
+    }
+    // if it's a HBox and we're close to top or bottom ...
+    else if (
+      (isHBox(container) || isTabbedContainer(container)) &&
+      (position.Header || closeToTheEdge & northsouth)
+    ) {
+      containerPos.height = 120;
+      return [containerPos, clientRect];
+    }
+  }
+}
+
+function isTabbedContainer(component: LayoutModel) {
+  return typeOf(component) === "Stack";
+}
+
+function isVBox(component: LayoutModel) {
+  return (
+    typeOf(component) === "Flexbox" &&
+    component.props.style.flexDirection === "column"
+  );
+}
+
+function isHBox(component: LayoutModel) {
+  return (
+    typeOf(component) === "Flexbox" &&
+    component.props.style.flexDirection === "row"
+  );
+}

package/src/drag-drop/DropTargetRenderer.css

@@ -0,0 +1,40 @@
+#hw-drag-canvas {
+  visibility: hidden;
+  z-index: 1;
+  position: absolute;
+  top: 0px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+}
+
+#hw-drag-canvas > svg {
+  position: absolute;
+}
+
+.drawing #hw-drag-canvas {
+  visibility: visible;
+}
+
+path.drop-target {
+  stroke: blue;
+  stroke-width: 4px;
+  fill: transparent;
+}
+
+path.drop-target.centre {
+  stroke: red;
+}
+
+#hw-drop-outline {
+  fill: none;
+  stroke: red;
+  stroke-dasharray: 4 2;
+}
+
+#hw-drop-guides {
+  fill: none;
+  stroke: rgba(0, 0, 0, 0.3);
+  stroke-dasharray: 2 3;
+}

package/src/drag-drop/DropTargetRenderer.tsx

@@ -0,0 +1,284 @@
+import React from "react";
+import { PopupService } from "@vuu-ui/ui-controls";
+import { DropMenu, computeMenuPosition } from "./DropMenu";
+import { RelativeDropPosition } from "./BoxModel";
+
+import "./DropTargetRenderer.css";
+import { DropTarget, GuideLine } from "./DropTarget";
+import { DragDropRect } from "./dragDropTypes";
+import { DragState } from "./DragState";
+
+type Point = [number, number];
+type TabMode = "full-view" | "tab-only";
+
+let _multiDropOptions = false;
+let _hoverDropTarget: DropTarget | null = null;
+let _shiftedTab: HTMLElement | null = null;
+
+const onHoverDropTarget = (dropTarget: DropTarget | null) =>
+  (_hoverDropTarget = dropTarget);
+
+const start = ([x, y]: Point) => `M${x},${y}`;
+const point = ([x, y]: Point) => `L${x},${y}`;
+const pathFromPoints = ([p1, ...points]: Point[]) =>
+  `${start(p1)} ${points.map(point)}Z`;
+
+const pathFromGuideLines = (guideLines?: GuideLine) => {
+  if (guideLines) {
+    const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;
+    return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;
+  } else {
+    return "";
+  }
+};
+
+function insertSVGRoot() {
+  if (document.getElementById("hw-drag-canvas") === null) {
+    const root = document.getElementById("root");
+    const container = document.createElement("div");
+    container.id = "hw-drag-canvas";
+    container.innerHTML = `
+      <svg width="100%" height="100%">
+        <path id="hw-drop-guides" />
+        <path
+          id="hw-drop-outline"
+          d="M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z">
+          <animate
+            attributeName="d"
+            id="hw-drop-outline-animate"
+            begin="indefinite"
+            dur="300ms"
+            fill="freeze"
+            to="M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z"
+          />
+        </path>
+      </svg>
+      `;
+    document.body.insertBefore(container, root);
+  }
+}
+export default class DropTargetCanvas {
+  private currentPath: string | null = null;
+  private tabMode: TabMode | null = null;
+
+  constructor() {
+    insertSVGRoot();
+  }
+
+  prepare(dragRect: DragDropRect, tabMode: TabMode = "full-view") {
+    // don't do this on body
+    document.body.classList.add("drawing");
+    this.currentPath = null;
+    this.tabMode = tabMode;
+
+    const { top, left, right, bottom } = dragRect;
+    const width = right - left;
+    const height = bottom - top;
+
+    const points = this.getPoints(0, 0, 0, 0);
+    // const points = this.getPoints(left, top, width, height);
+    const d = pathFromPoints(points);
+
+    const dropOutlinePath = document.getElementById("hw-drop-outline");
+    dropOutlinePath?.setAttribute("d", d);
+    this.currentPath = d;
+  }
+
+  clear() {
+    // don't do this on body
+    _hoverDropTarget = null;
+    clearShiftedTab();
+    document.body.classList.remove("drawing");
+    PopupService.hidePopup();
+  }
+
+  get hoverDropTarget() {
+    return _hoverDropTarget;
+  }
+
+  getPoints(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    tabLeft = 0,
+    tabWidth = 0,
+    tabHeight = 0
+  ): Point[] {
+    const tabOnly = this.tabMode === "tab-only";
+    if (tabWidth === 0) {
+      return [
+        [x, y + tabHeight],
+        [x, y + tabHeight],
+        [x, y],
+        [x + tabWidth, y],
+        [x + tabWidth, y],
+        [x + width, y],
+        [x + width, y + height],
+        [x, y + height],
+      ];
+    } else if (tabOnly) {
+      const left = tabLeft;
+      return [
+        [left, y],
+        [left, y],
+        [left + tabWidth, y],
+        [left + tabWidth, y],
+        [left + tabWidth, y + tabHeight],
+        [left + tabWidth, y + tabHeight],
+        [left, y + tabHeight],
+        [left, y + tabHeight],
+      ];
+    } else if (tabLeft === 0) {
+      return [
+        [x, y + tabHeight],
+        [x, y + tabHeight],
+        [x, y],
+        [x + tabWidth, y],
+        [x + tabWidth, y + tabHeight],
+        [x + width, y + tabHeight],
+        [x + width, y + height],
+        [x, y + height],
+      ];
+    } else {
+      return [
+        [x, y + tabHeight],
+        [x + tabLeft, y + tabHeight],
+        [x + tabLeft, y],
+        [x + tabLeft, y],
+        [x + tabLeft, y + tabHeight],
+        [x + width, y + tabHeight],
+        [x + width, y + height],
+        [x, y + height],
+      ];
+    }
+  }
+
+  draw(dropTarget: DropTarget, dragState: DragState) {
+    const sameDropTarget = false;
+    const wasMultiDrop = _multiDropOptions;
+
+    if (_hoverDropTarget !== null) {
+      this.drawTarget(_hoverDropTarget);
+    } else {
+      if (sameDropTarget === false) {
+        _multiDropOptions = dropTarget.nextDropTarget != null;
+        if (dropTarget.pos.tab) {
+          moveExistingTabs(dropTarget);
+        } else if (_shiftedTab) {
+          clearShiftedTab();
+        }
+        this.drawTarget(dropTarget, dragState);
+      }
+
+      if (_multiDropOptions) {
+        const [left, top, orientation] = computeMenuPosition(dropTarget);
+        if (!wasMultiDrop || !sameDropTarget) {
+          const component = (
+            <DropMenu
+              dropTarget={dropTarget}
+              onHover={onHoverDropTarget}
+              orientation={orientation}
+            />
+          );
+          PopupService.showPopup({
+            left,
+            top,
+            component,
+          });
+        } else {
+          PopupService.movePopupTo(left, top);
+        }
+      } else {
+        PopupService.hidePopup();
+      }
+    }
+  }
+
+  drawTarget(dropTarget: DropTarget, dragState?: DragState) {
+    const lineWidth = 6;
+
+    const targetDropOutline = dropTarget.getTargetDropOutline(
+      lineWidth,
+      dragState
+    );
+
+    if (targetDropOutline) {
+      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } =
+        targetDropOutline;
+      const w = r - l;
+      const h = b - t;
+
+      if (this.currentPath) {
+        const path = document.getElementById("hw-drop-outline");
+        path?.setAttribute("d", this.currentPath);
+      }
+
+      const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);
+      const path = pathFromPoints(points);
+      const animation = document.getElementById(
+        "hw-drop-outline-animate"
+      ) as unknown as SVGAnimateElement;
+      animation?.setAttribute("to", path);
+      animation?.beginElement();
+      this.currentPath = path;
+
+      const dropGuidePath = document.getElementById("hw-drop-guides");
+      dropGuidePath?.setAttribute("d", pathFromGuideLines(guideLines));
+    }
+  }
+}
+
+const cssShiftRight = "transition:margin-left .4s ease-out;margin-left: 63px";
+const cssShiftBack = "transition:margin-left .4s ease-out;margin-left: 0px";
+
+function moveExistingTabs(dropTarget: DropTarget) {
+  const { AFTER, BEFORE } = RelativeDropPosition;
+  const {
+    clientRect: { Stack },
+    pos: {
+      // tab: { index: tabIndex, positionRelativeToTab }
+      tab,
+    },
+  } = dropTarget;
+
+  const { id } = dropTarget.component.props;
+  let tabEl = null;
+  // console.log(`tabPos = ${tabPos} (width=${tabWidth}) x=${x}`)
+  if (Stack && tab && tab.positionRelativeToTab !== AFTER) {
+    const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;
+    const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${
+      tab.index + tabOffset
+    })`;
+    tabEl = document.getElementById(id)?.querySelector(selector) as HTMLElement;
+    if (tabEl) {
+      if (_shiftedTab === null || _shiftedTab !== tabEl) {
+        tabEl.style.cssText = cssShiftRight;
+        if (_shiftedTab) {
+          _shiftedTab.style.cssText = cssShiftBack;
+        }
+        _shiftedTab = tabEl;
+      }
+    } else {
+      clearShiftedTab();
+    }
+  } else if (tab?.positionRelativeToTab === BEFORE) {
+    if (_shiftedTab === null) {
+      const selector = ".vuuHeader-title";
+      tabEl = document
+        .getElementById(id)
+        ?.querySelector(selector) as HTMLElement;
+      tabEl.style.cssText = cssShiftRight;
+      _shiftedTab = tabEl;
+    }
+  } else {
+    clearShiftedTab();
+  }
+}
+
+function clearShiftedTab() {
+  if (_shiftedTab) {
+    _shiftedTab.style.cssText = cssShiftBack;
+    _shiftedTab = null;
+  }
+}