@vuu-ui/vuu-layout 0.5.4 → 0.5.6

package/src/drag-drop/DropTarget.ts

@@ -1,392 +0,0 @@
-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;
-
-  const 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];
-
-    const 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];
-    const 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

@@ -1,40 +0,0 @@
-#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;
-}
-
-#vuu-drop-outline {
-  fill: rgba(0,0,255,.3);
-  stroke: none;
-  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

@@ -1,279 +0,0 @@
-import { PopupService } from "../popup";
-import { RelativeDropPosition } from "./BoxModel";
-import { DragDropRect } from "./dragDropTypes";
-import { DragState } from "./DragState";
-import { computeMenuPosition, DropMenu } from "./DropMenu";
-import { DropTarget, GuideLine } from "./DropTarget";
-
-import "./DropTargetRenderer.css";
-
-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="vuu-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 points = this.getPoints(0, 0, 0, 0);
-    // const points = this.getPoints(left, top, width, height);
-    const d = pathFromPoints(points);
-
-    const dropOutlinePath = document.getElementById("vuu-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("vuu-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;
-  }
-}