@vuu-ui/vuu-layout 0.0.26

package/esm/drag-drop/DragState.js

@@ -0,0 +1,152 @@
+import { pointPositionWithinRect } from './BoxModel.js';
+
+const SCALE_FACTOR = 0.4;
+class DragState {
+  constructor(zone, mouseX, mouseY, measurements, intrinsicSize) {
+    this.init(zone, mouseX, mouseY, measurements, intrinsicSize);
+  }
+  init(zone, mouseX, mouseY, rect, intrinsicSize) {
+    const { left: x, top: y } = rect;
+    const { pctX, pctY } = pointPositionWithinRect(mouseX, mouseY, rect);
+    const scaleFactor = SCALE_FACTOR;
+    const leadX = pctX * rect.width;
+    const trailX = rect.width - leadX;
+    const leadY = pctY * rect.height;
+    const trailY = rect.height - leadY;
+    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() {
+    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, mousePos) {
+    const state = this[xy], mouseConstraint = this.constraint.mouse[xy], posConstraint = this.constraint.pos[xy], previousPos = state.pos;
+    const diff = mousePos - state.mousePos;
+    if (diff < 0) {
+      if (state.lo) ; 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) ; 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;
+  }
+  dropXY(dir) {
+    const pos = this[dir], rect = this.constraint.zone[dir];
+    return pos.lo ? Math.max(rect.lo, pos.mousePos) : pos.hi ? Math.min(pos.mousePos, Math.round(rect.hi) - 1) : pos.mousePos;
+  }
+}
+
+export { DragState };
+//# sourceMappingURL=DragState.js.map

package/esm/drag-drop/DragState.js.map

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

package/esm/drag-drop/Draggable.js

@@ -0,0 +1,190 @@
+import { findTarget, followPath } from '../utils/pathUtils.js';
+import { getProps } from '../utils/propUtils.js';
+import { BoxModel } from './BoxModel.js';
+import { DragState } from './DragState.js';
+import { identifyDropTarget, DropTarget } from './DropTarget.js';
+import DropTargetCanvas from './DropTargetRenderer.js';
+
+let _dragStartCallback;
+let _dragMoveCallback;
+let _dragEndCallback;
+let _dragStartX;
+let _dragStartY;
+let _dragContainer;
+let _dragState;
+let _dropTarget = null;
+let _validDropTargetPaths;
+let _dragInstructions;
+let _measurements;
+let _simpleDrag;
+let _dragThreshold;
+let _mouseDownTimer = null;
+const DEFAULT_DRAG_THRESHOLD = 3;
+const _dropTargetRenderer = new DropTargetCanvas();
+const SCALE_FACTOR = 0.4;
+function getDragContainer(rootContainer, dragContainerPath) {
+  if (dragContainerPath) {
+    return followPath(rootContainer, dragContainerPath);
+  } else {
+    return findTarget(
+      rootContainer,
+      // TODO dropTarget is not good
+      (props) => props.dropTarget
+    );
+  }
+}
+const Draggable = {
+  handleMousedown(e, dragStartCallback, dragInstructions = {}) {
+    _dragStartCallback = dragStartCallback;
+    _dragInstructions = dragInstructions;
+    _dragStartX = e.clientX;
+    _dragStartY = e.clientY;
+    _dragThreshold = dragInstructions.dragThreshold === void 0 ? DEFAULT_DRAG_THRESHOLD : dragInstructions.dragThreshold;
+    if (_dragThreshold === 0) {
+      _dragStartCallback(e, 0, 0);
+    } else {
+      window.addEventListener("mousemove", preDragMousemoveHandler, false);
+      window.addEventListener("mouseup", preDragMouseupHandler, false);
+      _mouseDownTimer = window.setTimeout(() => {
+        window.removeEventListener("mousemove", preDragMousemoveHandler, false);
+        window.removeEventListener("mouseup", preDragMouseupHandler, false);
+        _dragStartCallback?.(e, 0, 0);
+      }, 500);
+    }
+    e.preventDefault();
+  },
+  // called from handleDragStart (_dragCallback)
+  initDrag(rootContainer, dragContainerPath, { top, left, right, bottom }, dragPos, dragHandler, intrinsicSize, dropTargets) {
+    ({ drag: _dragMoveCallback, drop: _dragEndCallback } = dragHandler);
+    return initDrag(
+      rootContainer,
+      dragContainerPath,
+      { top, left, right, bottom },
+      dragPos,
+      intrinsicSize,
+      dropTargets
+    );
+  }
+};
+function preDragMousemoveHandler(e) {
+  const x_diff = e.clientX - _dragStartX ;
+  const y_diff = e.clientY - _dragStartY ;
+  const mouseMoveDistance = Math.max(Math.abs(x_diff), Math.abs(y_diff));
+  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, dragContainerPath, dragRect, dragPos, intrinsicSize, dropTargets) {
+  _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.props.path);
+    _validDropTargetPaths = dropPaths;
+  }
+  _measurements = BoxModel.measure(_dragContainer, dropTargets);
+  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);
+  window.addEventListener("keydown", dragKeydownHandler, 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) {
+  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 === void 0 && newY === void 0) ; else {
+    _dragMoveCallback?.(newX, newY);
+  }
+  if (_simpleDrag || _dragContainer === void 0) {
+    return;
+  }
+  if (dragState.inBounds()) {
+    dropTarget = identifyDropTarget(
+      x,
+      y,
+      _dragContainer,
+      _measurements,
+      dragState.hasIntrinsicSize(),
+      _validDropTargetPaths
+    );
+  } else {
+    dropTarget = identifyDropTarget(
+      dragState.dropX(),
+      dragState.dropY(),
+      _dragContainer,
+      _measurements
+    );
+  }
+  if (currentDropTarget) {
+    if (dropTarget == null || dropTarget.box !== currentDropTarget.box) {
+      _dropTarget = null;
+    }
+  }
+  if (dropTarget) {
+    _dropTargetRenderer.draw(dropTarget, dragState);
+    _dropTarget = dropTarget;
+  }
+}
+function dragKeydownHandler(evt) {
+  if (evt.key === "Escape") {
+    _dropTarget = null;
+    onDragEnd();
+  }
+}
+function dragMouseupHandler() {
+  onDragEnd();
+}
+function onDragEnd() {
+  if (_dropTarget) {
+    const dropTarget = _dropTargetRenderer.hoverDropTarget || DropTarget.getActiveDropTarget(_dropTarget);
+    _dragEndCallback?.(dropTarget);
+    _dropTarget = null;
+  } else {
+    _dragEndCallback?.();
+  }
+  _dragMoveCallback = null;
+  _dragEndCallback = null;
+  _dragContainer = void 0;
+  _dropTargetRenderer.clear();
+  _validDropTargetPaths = void 0;
+  window.removeEventListener("mousemove", dragMousemoveHandler, false);
+  window.removeEventListener("mouseup", dragMouseupHandler, false);
+  window.removeEventListener("keydown", dragKeydownHandler, false);
+}
+
+export { Draggable };
+//# sourceMappingURL=Draggable.js.map

package/esm/drag-drop/Draggable.js.map

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

package/esm/drag-drop/DropMenu.css.js

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

package/esm/drag-drop/DropMenu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropMenu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/drag-drop/DropMenu.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import dropMenuCss from './DropMenu.css.js';
+
+function computeMenuPosition(dropTarget, offsetTop = 0, offsetLeft = 0) {
+  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";
+const DropMenu = ({
+  className,
+  dropTarget,
+  onHover,
+  orientation
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-drop-menu",
+    css: dropMenuCss,
+    window: targetWindow
+  });
+  const dropTargets = dropTarget.toArray();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classBase, className, `${classBase}-${orientation}`),
+      onMouseLeave: () => onHover(null),
+      children: dropTargets.map((target, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${classBase}-item`,
+          "data-icon": i === 0 ? "column-2A" : "column-2B",
+          onMouseEnter: () => onHover(target)
+        },
+        i
+      ))
+    }
+  );
+};
+
+export { DropMenu, computeMenuPosition };
+//# sourceMappingURL=DropMenu.js.map

package/esm/drag-drop/DropMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropMenu.js","sources":["../../src/drag-drop/DropMenu.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { DropTarget } from \"./DropTarget\";\n\nimport dropMenuCss from \"./DropMenu.css\";\n\nexport function computeMenuPosition(\n  dropTarget: DropTarget,\n  offsetTop = 0,\n  offsetLeft = 0\n): [number, number, \"left\" | \"bottom\" | \"right\" | \"top\"] {\n  const { pos, clientRect: box } = dropTarget;\n  const menuOffset = 20;\n\n  return pos.position.West\n    ? [box.left - offsetLeft + menuOffset, pos.y - offsetTop, \"left\"]\n    : pos.position.South\n    ? [pos.x - offsetLeft, box.bottom - offsetTop - menuOffset, \"bottom\"]\n    : pos.position.East\n    ? [box.right - offsetLeft - menuOffset, pos.y - offsetTop, \"right\"]\n    : /* North | Header*/ [\n        pos.x - offsetLeft,\n        box.top - offsetTop + menuOffset,\n        \"top\",\n      ];\n}\n\nconst classBase = \"vuuDropMenu\";\n\nexport interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget: DropTarget;\n  onHover: (target: DropTarget | null) => void;\n  orientation?: \"left\" | \"top\" | \"right\" | \"bottom\";\n}\n\nexport const DropMenu = ({\n  className,\n  dropTarget,\n  onHover,\n  orientation,\n}: DropMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-drop-menu\",\n    css: dropMenuCss,\n    window: targetWindow,\n  });\n\n  const dropTargets = dropTarget.toArray();\n  // TODO we have all the information here to draw a mini target map\n  // but maybe thats overkill ...\n\n  return (\n    <div\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      onMouseLeave={() => onHover(null)}\n    >\n      {dropTargets.map((target, i) => (\n        <div\n          key={i}\n          className={`${classBase}-item`}\n          data-icon={i === 0 ? \"column-2A\" : \"column-2B\"}\n          onMouseEnter={() => onHover(target)}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAQO,SAAS,mBACd,CAAA,UAAA,EACA,SAAY,GAAA,CAAA,EACZ,aAAa,CAC0C,EAAA;AACvD,EAAA,MAAM,EAAE,GAAA,EAAK,UAAY,EAAA,GAAA,EAAQ,GAAA,UAAA,CAAA;AACjC,EAAA,MAAM,UAAa,GAAA,EAAA,CAAA;AAEnB,EAAA,OAAO,IAAI,QAAS,CAAA,IAAA,GAChB,CAAC,GAAA,CAAI,OAAO,UAAa,GAAA,UAAA,EAAY,GAAI,CAAA,CAAA,GAAI,WAAW,MAAM,CAAA,GAC9D,GAAI,CAAA,QAAA,CAAS,QACb,CAAC,GAAA,CAAI,CAAI,GAAA,UAAA,EAAY,IAAI,MAAS,GAAA,SAAA,GAAY,UAAY,EAAA,QAAQ,IAClE,GAAI,CAAA,QAAA,CAAS,IACb,GAAA,CAAC,IAAI,KAAQ,GAAA,UAAA,GAAa,YAAY,GAAI,CAAA,CAAA,GAAI,WAAW,OAAO,CAAA;AAAA;AAAA,IAC5C;AAAA,MAClB,IAAI,CAAI,GAAA,UAAA;AAAA,MACR,GAAA,CAAI,MAAM,SAAY,GAAA,UAAA;AAAA,MACtB,KAAA;AAAA,KACF;AAAA,GAAA,CAAA;AACN,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAA;AAQX,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AACF,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,WAAW,OAAQ,EAAA,CAAA;AAIvC,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,YAAA,EAAc,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAE/B,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CACxB,qBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,UACvB,WAAA,EAAW,CAAM,KAAA,CAAA,GAAI,WAAc,GAAA,WAAA;AAAA,UACnC,YAAA,EAAc,MAAM,OAAA,CAAQ,MAAM,CAAA;AAAA,SAAA;AAAA,QAH7B,CAAA;AAAA,OAKR,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}