@vuu-ui/vuu-layout 0.5.14 → 0.5.15

package/src/drag-drop/DragState.ts

@@ -0,0 +1,219 @@
+import { pointPositionWithinRect } from './BoxModel';
+import { DragDropRect } from './dragDropTypes';
+
+const SCALE_FACTOR = 0.4;
+
+export type IntrinsicSizes = {
+  height?: number;
+  width?: number;
+};
+
+interface ZoneRange {
+  hi: number;
+  lo: number;
+}
+type DragConstraint = {
+  zone: {
+    x: ZoneRange;
+    y: ZoneRange;
+  };
+  pos: {
+    x: ZoneRange;
+    y: ZoneRange;
+  };
+  mouse: {
+    x: ZoneRange;
+    y: ZoneRange;
+  };
+};
+
+interface ExtendedZoneRange {
+  lo: boolean;
+  hi: boolean;
+  mousePct: number;
+  mousePos: number;
+  pos: number;
+}
+
+export class DragState {
+  public constraint!: DragConstraint;
+  public x!: ExtendedZoneRange;
+  public y!: ExtendedZoneRange;
+  public intrinsicSize: IntrinsicSizes | undefined;
+
+  constructor(
+    zone: DragDropRect,
+    mouseX: number,
+    mouseY: number,
+    measurements: DragDropRect,
+    intrinsicSize?: IntrinsicSizes
+  ) {
+    this.init(zone, mouseX, mouseY, measurements, intrinsicSize);
+  }
+
+  init(
+    zone: DragDropRect,
+    mouseX: number,
+    mouseY: number,
+    rect: DragDropRect,
+    intrinsicSize?: IntrinsicSizes
+  ) {
+    const { left: x, top: y } = rect;
+
+    const { pctX, pctY } = pointPositionWithinRect(mouseX, mouseY, rect);
+
+    // We are applying a scale factor of 0.4 to the draggee. This is purely a visual
+    // effect - the actual box size remains the original size. The 'leading' values
+    // represent the difference between the visual scaled down box and the actual box.
+
+    const scaleFactor = SCALE_FACTOR;
+
+    const leadX = pctX * rect.width;
+    const trailX = rect.width - leadX;
+    const leadY = pctY * rect.height;
+    const trailY = rect.height - leadY;
+
+    // When we assign position to rect using css. positioning units are applied to the
+    // unscaled shape, so we have to adjust values to take scaling into account.
+    const scaledWidth = rect.width * scaleFactor,
+      scaledHeight = rect.height * scaleFactor;
+
+    const scaleDiff = 1 - scaleFactor;
+    const leadXScaleDiff = leadX * scaleDiff;
+    const leadYScaleDiff = leadY * scaleDiff;
+    const trailXScaleDiff = trailX * scaleDiff;
+    const trailYScaleDiff = trailY * scaleDiff;
+
+    this.intrinsicSize = intrinsicSize;
+
+    this.constraint = {
+      zone: {
+        x: {
+          lo: zone.left,
+          hi: zone.right
+        },
+        y: {
+          lo: zone.top,
+          hi: zone.bottom
+        }
+      },
+
+      pos: {
+        x: {
+          lo: /* left */ zone.left - leadXScaleDiff,
+          hi: /* right */ zone.right - rect.width + trailXScaleDiff
+        },
+        y: {
+          lo: /* top */ zone.top - leadYScaleDiff,
+          hi: /* bottom */ zone.bottom - rect.height + trailYScaleDiff
+        }
+      },
+      mouse: {
+        x: {
+          lo: /* left */ zone.left + scaledWidth * pctX,
+          hi: /* right */ zone.right - scaledWidth * (1 - pctX)
+        },
+        y: {
+          lo: /* top */ zone.top + scaledHeight * pctY,
+          hi: /* bottom */ zone.bottom - scaledHeight * (1 - pctY)
+        }
+      }
+    };
+
+    this.x = {
+      pos: x,
+      lo: false,
+      hi: false,
+      mousePos: mouseX,
+      mousePct: pctX
+    };
+    this.y = {
+      pos: y,
+      lo: false,
+      hi: false,
+      mousePos: mouseY,
+      mousePct: pctY
+    };
+  }
+
+  outOfBounds() {
+    return this.x.lo || this.x.hi || this.y.lo || this.y.hi;
+  }
+
+  inBounds() {
+    return !this.outOfBounds();
+  }
+
+  dropX() {
+    return this.dropXY('x');
+  }
+
+  dropY() {
+    return this.dropXY('y');
+  }
+
+  hasIntrinsicSize(): number | undefined {
+    return this?.intrinsicSize?.height && this?.intrinsicSize?.width;
+  }
+
+  /*
+   *  diff = mouse movement, signed int
+   *  xy = 'x' or 'y'
+   */
+  //todo, diff can be calculated in here
+  update(xy: 'x' | 'y', mousePos: number) {
+    const state = this[xy],
+      mouseConstraint = this.constraint.mouse[xy],
+      posConstraint = this.constraint.pos[xy],
+      previousPos = state.pos;
+
+    const diff = mousePos - state.mousePos;
+
+    //xy==='x' && console.log(`update: state.lo=${state.lo}, mPos=${mousePos}, mC.lo=${mouseConstraint.lo}, prevPos=${previousPos}, diff=${diff} `  );
+
+    if (diff < 0) {
+      if (state.lo) {
+        /* do nothing */
+      } else if (mousePos < mouseConstraint.lo) {
+        state.lo = true;
+        state.pos = posConstraint.lo;
+      } else if (state.hi) {
+        if (mousePos < mouseConstraint.hi) {
+          state.hi = false;
+          state.pos += diff;
+        }
+      } else {
+        state.pos += diff;
+      }
+    } else if (diff > 0) {
+      if (state.hi) {
+        /* do nothing */
+      } else if (mousePos > mouseConstraint.hi) {
+        state.hi = true;
+        state.pos = posConstraint.hi;
+      } else if (state.lo) {
+        if (mousePos > mouseConstraint.lo) {
+          state.lo = false;
+          state.pos += diff;
+        }
+      } else {
+        state.pos += diff;
+      }
+    }
+
+    state.mousePos = mousePos;
+
+    return previousPos !== state.pos;
+  }
+
+  private dropXY(this: DragState, dir: 'x' | 'y') {
+    const pos = this[dir],
+      rect = this.constraint.zone[dir];
+    // why not do the rounding +/- 1 on the rect initially - this is all it is usef for
+    return pos.lo
+      ? Math.max(rect.lo, pos.mousePos)
+      : pos.hi
+      ? Math.min(pos.mousePos, Math.round(rect.hi) - 1)
+      : pos.mousePos;
+  }
+}

package/src/drag-drop/Draggable.ts

@@ -0,0 +1,282 @@
+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";
+import { DragDropRect } from "./dragDropTypes";
+import { DragState, IntrinsicSizes } from "./DragState";
+import { DropTarget, identifyDropTarget } from "./DropTarget";
+import DropTargetRenderer from "./DropTargetRenderer";
+
+export type DragStartCallback = (e: MouseEvent, x: number, y: number) => void;
+export type DragMoveCallback = (
+  x: number | undefined,
+  y: number | undefined
+) => void;
+export type DragEndCallback = (droppedTarget: Partial<DropTarget>) => void;
+export type DragInstructions = {
+  DoNotRemove?: boolean;
+  DoNotTransform?: boolean;
+  dragThreshold?: number;
+  RemoveDraggableOnDragEnd?: boolean;
+};
+
+let _dragStartCallback: DragStartCallback | null;
+let _dragMoveCallback: DragMoveCallback | null;
+let _dragEndCallback: DragEndCallback | null;
+
+let _dragStartX: number;
+let _dragStartY: number;
+let _dragContainer: ReactElement | undefined;
+let _dragState: DragState;
+let _dropTarget: DropTarget | null = null;
+let _validDropTargetPaths: string[] | undefined;
+let _dragInstructions: DragInstructions;
+let _measurements: Measurements;
+let _simpleDrag: boolean;
+let _dragThreshold: number;
+let _mouseDownTimer: number | null = null;
+
+const DEFAULT_DRAG_THRESHOLD = 3;
+const _dropTargetRenderer = new DropTargetRenderer();
+const SCALE_FACTOR = 0.4;
+
+function getDragContainer(
+  rootContainer: ReactElement,
+  dragContainerPath: string
+) {
+  if (dragContainerPath) {
+    return followPath(rootContainer, dragContainerPath) as ReactElement;
+  } else {
+    return findTarget(
+      rootContainer,
+      (props) => props.dropTarget
+    ) as ReactElement;
+  }
+}
+
+export const Draggable = {
+  handleMousedown(
+    e: MouseEvent,
+    dragStartCallback: DragStartCallback,
+    dragInstructions: DragInstructions = {}
+  ) {
+    _dragStartCallback = dragStartCallback;
+    _dragInstructions = dragInstructions;
+
+    _dragStartX = e.clientX;
+    _dragStartY = e.clientY;
+
+    _dragThreshold =
+      dragInstructions.dragThreshold === undefined
+        ? DEFAULT_DRAG_THRESHOLD
+        : dragInstructions.dragThreshold;
+
+    if (_dragThreshold === 0) {
+      // maybe this should be -1
+      _dragStartCallback(e, 0, 0);
+    } else {
+      window.addEventListener("mousemove", preDragMousemoveHandler, false);
+      window.addEventListener("mouseup", preDragMouseupHandler, false);
+
+      _mouseDownTimer = window.setTimeout(() => {
+        console.log("mousedownTimer fires");
+        window.removeEventListener("mousemove", preDragMousemoveHandler, false);
+        window.removeEventListener("mouseup", preDragMouseupHandler, false);
+        _dragStartCallback?.(e, 0, 0);
+      }, 500);
+    }
+
+    e.preventDefault();
+  },
+
+  // called from handleDragStart (_dragCallback)
+  initDrag(
+    rootContainer: ReactElement,
+    dragContainerPath: string,
+    { top, left, right, bottom }: rect,
+    dragPos: { x: number; y: number },
+    dragHandler: {
+      drag: DragMoveCallback;
+      drop: DragEndCallback;
+    },
+    intrinsicSize?: IntrinsicSizes,
+    dropTargets?: string[]
+  ) {
+    ({ drag: _dragMoveCallback, drop: _dragEndCallback } = dragHandler);
+    return initDrag(
+      rootContainer,
+      dragContainerPath,
+      { top, left, right, bottom } as DragDropRect,
+      dragPos,
+      intrinsicSize,
+      dropTargets
+    );
+  },
+};
+
+function preDragMousemoveHandler(e: MouseEvent) {
+  const x = true;
+  const y = true;
+
+  const x_diff = x ? e.clientX - _dragStartX : 0;
+  const y_diff = y ? e.clientY - _dragStartY : 0;
+  const mouseMoveDistance = Math.max(Math.abs(x_diff), Math.abs(y_diff));
+
+  // when we do finally move the draggee, we are going to 'jump' by the amount of the drag threshold, should we
+  // attempt to animate this ?
+  if (mouseMoveDistance > _dragThreshold) {
+    window.removeEventListener("mousemove", preDragMousemoveHandler, false);
+    window.removeEventListener("mouseup", preDragMouseupHandler, false);
+    _dragStartCallback?.(e, x_diff, y_diff);
+    _dragStartCallback = null;
+  }
+}
+
+function preDragMouseupHandler() {
+  if (_mouseDownTimer) {
+    window.clearTimeout(_mouseDownTimer);
+    _mouseDownTimer = null;
+  }
+  window.removeEventListener("mousemove", preDragMousemoveHandler, false);
+  window.removeEventListener("mouseup", preDragMouseupHandler, false);
+}
+
+function initDrag(
+  rootContainer: ReactElement,
+  dragContainerPath: string,
+  dragRect: DragDropRect,
+  dragPos: { x: number; y: number },
+  intrinsicSize?: IntrinsicSizes,
+  dropTargets?: string[]
+) {
+  _dragContainer = getDragContainer(rootContainer, dragContainerPath);
+  const { "data-path": dataPath, path = dataPath } = getProps(_dragContainer);
+
+  if (dropTargets) {
+    const dropPaths = dropTargets
+      .map((id) => findTarget(rootContainer, (props) => props.id === id))
+      .map((target) => (target as LayoutModel).props.path);
+    _validDropTargetPaths = dropPaths;
+  }
+
+  // var start = window.performance.now();
+  // translate the layout $position to drag-oriented co-ordinates, ignoring splitters
+  _measurements = BoxModel.measure(_dragContainer, dropTargets);
+  console.log({ _measurements });
+  // onsole.log({ measurements: _measurements });
+  // var end = window.performance.now();
+  // onsole.log(`[Draggable] measurements took ${end - start}ms`, _measurements);
+
+  const dragZone = _measurements[path];
+
+  _dragState = new DragState(
+    dragZone,
+    dragPos.x,
+    dragPos.y,
+    dragRect,
+    intrinsicSize
+  );
+
+  const pctX = Math.round(_dragState.x.mousePct * 100);
+  const pctY = Math.round(_dragState.y.mousePct * 100);
+
+  window.addEventListener("mousemove", dragMousemoveHandler, false);
+  window.addEventListener("mouseup", dragMouseupHandler, false);
+
+  _simpleDrag = false;
+
+  _dropTargetRenderer.prepare(dragRect, "tab-only");
+
+  return _dragInstructions.DoNotTransform
+    ? "transform:none"
+    : // scale factor should be applied in caller, not here
+      `transform:scale(${SCALE_FACTOR},${SCALE_FACTOR});transform-origin:${pctX}% ${pctY}%;`;
+}
+
+function dragMousemoveHandler(evt: MouseEvent) {
+  const x = evt.clientX;
+  const y = evt.clientY;
+  const dragState = _dragState;
+  const currentDropTarget = _dropTarget;
+  let dropTarget;
+  let newX, newY;
+
+  if (dragState.update("x", x)) {
+    newX = dragState.x.pos;
+  }
+
+  if (dragState.update("y", y)) {
+    newY = dragState.y.pos;
+  }
+
+  if (newX === undefined && newY === undefined) {
+    //onsole.log('both x and y are unchanged');
+  } else {
+    _dragMoveCallback?.(newX, newY);
+  }
+
+  if (_simpleDrag || _dragContainer === undefined) {
+    return;
+  }
+
+  if (dragState.inBounds()) {
+    dropTarget = identifyDropTarget(
+      x,
+      y,
+      _dragContainer,
+      _measurements,
+      dragState.hasIntrinsicSize(),
+      _validDropTargetPaths
+    );
+  } else {
+    dropTarget = identifyDropTarget(
+      dragState.dropX(),
+      dragState.dropY(),
+      _dragContainer,
+      _measurements
+    );
+  }
+
+  // did we have an existing droptarget which is no longer such ...
+  if (currentDropTarget) {
+    if (dropTarget == null || dropTarget.box !== currentDropTarget.box) {
+      _dropTarget = null;
+    }
+  }
+
+  if (dropTarget) {
+    _dropTargetRenderer.draw(dropTarget, dragState);
+    _dropTarget = dropTarget;
+  }
+}
+
+function dragMouseupHandler() {
+  onDragEnd();
+}
+
+function onDragEnd() {
+  if (_dropTarget) {
+    const dropTarget =
+      _dropTargetRenderer.hoverDropTarget ||
+      DropTarget.getActiveDropTarget(_dropTarget);
+
+    _dragEndCallback?.(dropTarget as DropTarget);
+
+    _dropTarget = null;
+  } else {
+    _dragEndCallback?.({
+      component: _dragContainer,
+      pos: { position: Position.Absolute } as any,
+    });
+  }
+
+  _dragMoveCallback = null;
+  _dragEndCallback = null;
+
+  _dragContainer = undefined;
+  _dropTargetRenderer.clear();
+  _validDropTargetPaths = undefined;
+  window.removeEventListener("mousemove", dragMousemoveHandler, false);
+  window.removeEventListener("mouseup", dragMouseupHandler, false);
+}

package/src/drag-drop/DropMenu.css

@@ -0,0 +1,71 @@
+.vuuDropMenu {
+  margin-left: -50%;
+  margin-bottom: -50%;
+  background-color: white;
+  border: solid 1px var(--grey40);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px;
+  border-radius: 3px;
+}
+
+.vuuDropMenu-left,
+.vuuDropMenu-right {
+  flex-direction: column;
+}
+
+.vuuDropMenu-bottom {
+  transform: translate(0, -30px);
+}
+
+.vuuDropMenu-right {
+  transform: translate(-20px, 0);
+}
+
+.vuuDropMenu-item {
+  --vuu-icon-size: 20px;
+  width: 32px;
+  height: 32px;
+  background-color: var(--grey20);
+  border-bottom: solid 1px var(--grey40);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vuuDropMenu-item .Icon {
+  transform: scale(1.25);
+  transform-origin: center center;
+}
+
+.vuuDropMenu-left .vuuDropMenu-item .hwIcon {
+  transform: scale(1.25) rotate(180deg);
+  transform-origin: center center;
+}
+
+.vuuDropMenu-top .vuuDropMenu-item .hwIcon {
+  transform: scale(1.25) rotate(270deg);
+  transform-origin: center center;
+}
+
+.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {
+  transform: scale(1.25) rotate(90deg);
+  transform-origin: center center;
+}
+
+.vuuDropMenu-item .hwIcon-path {
+  fill: grey;
+}
+.vuuDropMenu-item:hover {
+  background-color: rgba(200, 200, 200, 0.5);
+}
+
+.vuuDropMenu-item:hover .hwIcon-path-2 {
+  fill: blue;
+}
+
+.vuuDropMenu-item:last-child {
+  border-bottom: none;
+}

package/src/drag-drop/DropMenu.tsx

@@ -0,0 +1,61 @@
+import cx from "classnames";
+import { HTMLAttributes } from "react";
+import { DropTarget } from "./DropTarget";
+
+import "./DropMenu.css";
+
+export function computeMenuPosition(
+  dropTarget: DropTarget,
+  offsetTop = 0,
+  offsetLeft = 0
+): [number, number, "left" | "bottom" | "right" | "top"] {
+  const { pos, clientRect: box } = dropTarget;
+  const menuOffset = 20;
+
+  return pos.position.West
+    ? [box.left - offsetLeft + menuOffset, pos.y - offsetTop, "left"]
+    : pos.position.South
+    ? [pos.x - offsetLeft, box.bottom - offsetTop - menuOffset, "bottom"]
+    : pos.position.East
+    ? [box.right - offsetLeft - menuOffset, pos.y - offsetTop, "right"]
+    : /* North | Header*/ [
+        pos.x - offsetLeft,
+        box.top - offsetTop + menuOffset,
+        "top",
+      ];
+}
+
+const classBase = "vuuDropMenu";
+
+export interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {
+  dropTarget: DropTarget;
+  onHover: (target: DropTarget | null) => void;
+  orientation?: "left" | "top" | "right" | "bottom";
+}
+
+export const DropMenu = ({
+  className,
+  dropTarget,
+  onHover,
+  orientation,
+}: DropMenuProps) => {
+  const dropTargets = dropTarget.toArray();
+  // TODO we have all the information here to draw a mini target map
+  // but maybe thats overkill ...
+
+  return (
+    <div
+      className={cx(classBase, className, `${classBase}-${orientation}`)}
+      onMouseLeave={() => onHover(null)}
+    >
+      {dropTargets.map((target, i) => (
+        <div
+          key={i}
+          className={`${classBase}-item`}
+          data-icon={i === 0 ? "column-2A" : "column-2B"}
+          onMouseEnter={() => onHover(target)}
+        />
+      ))}
+    </div>
+  );
+};