@vuu-ui/vuu-layout 2.1.18 → 2.1.19-beta.2

package/src/drag-drop/BoxModel.js

@@ -0,0 +1,337 @@
+import { boxContainsPoint, isContainer } from "@vuu-ui/vuu-utils";
+import { getProps, typeOf } from "../utils/index.js";
+const positionValues = {
+    north: 1,
+    east: 2,
+    south: 4,
+    west: 8,
+    header: 16,
+    centre: 32,
+    absolute: 64
+};
+const RelativeDropPosition = {
+    AFTER: "after",
+    BEFORE: "before"
+};
+const Position = Object.freeze({
+    North: _position("north"),
+    East: _position("east"),
+    South: _position("south"),
+    West: _position("west"),
+    Header: _position("header"),
+    Centre: _position("centre"),
+    Absolute: _position("absolute")
+});
+function _position(str) {
+    return Object.freeze({
+        offset: "north" === str || "west" === str ? 0 : "south" === str || "east" === str ? 1 : NaN,
+        valueOf: function() {
+            return positionValues[str];
+        },
+        toString: function() {
+            return str;
+        },
+        North: "north" === str,
+        South: "south" === str,
+        East: "east" === str,
+        West: "west" === str,
+        Header: "header" === str,
+        Centre: "centre" === str,
+        NorthOrSouth: "north" === str || "south" === str,
+        EastOrWest: "east" === str || "west" === str,
+        NorthOrWest: "north" === str || "west" === str,
+        SouthOrEast: "east" === str || "south" === str,
+        Absolute: "absolute" === str
+    });
+}
+const NORTH = Position.North, SOUTH = Position.South, EAST = Position.East, WEST = Position.West, HEADER = Position.Header, CENTRE = Position.Centre;
+class BoxModel {
+    static measure(model, dropTargetPaths = []) {
+        const measurements = {};
+        measureRootComponent(model, measurements, dropTargetPaths);
+        return measurements;
+    }
+    static allBoxesContainingPoint(layout, measurements, x, y, validDropTargets) {
+        return allBoxesContainingPoint(layout, measurements, x, y, validDropTargets).reverse();
+    }
+}
+function pointPositionWithinRect(x, y, rect, borderZone = 30) {
+    const width = rect.right - rect.left;
+    const height = rect.bottom - rect.top;
+    const posX = x - rect.left;
+    const posY = y - rect.top;
+    let closeToTheEdge = 0;
+    if (posX < borderZone) closeToTheEdge += 8;
+    if (posX > width - borderZone) closeToTheEdge += 2;
+    if (posY < borderZone) closeToTheEdge += 1;
+    if (posY > height - borderZone) closeToTheEdge += 4;
+    return {
+        pctX: posX / width,
+        pctY: posY / height,
+        closeToTheEdge
+    };
+}
+function getPosition(x, y, rect, targetOrientation) {
+    const { BEFORE, AFTER } = RelativeDropPosition;
+    const { pctX, pctY, closeToTheEdge } = pointPositionWithinRect(x, y, rect);
+    let position;
+    let tab;
+    if ("row" === targetOrientation) position = pctX < 0.5 ? WEST : EAST;
+    else if (rect.header && boxContainsPoint(rect.header, x, y)) {
+        position = HEADER;
+        if (rect.Stack) {
+            const tabCount = rect.Stack.length;
+            if (0 === tabCount) tab = {
+                index: -1,
+                left: rect.left,
+                positionRelativeToTab: AFTER,
+                width: 0
+            };
+            else {
+                const targetTab = rect.Stack.find(({ left, right })=>x >= left && x <= right);
+                if (targetTab) {
+                    const tabWidth = targetTab.right - targetTab.left;
+                    tab = {
+                        index: rect.Stack.indexOf(targetTab),
+                        left: targetTab.left,
+                        positionRelativeToTab: (x - targetTab.left) / tabWidth < 0.5 ? BEFORE : AFTER,
+                        width: tabWidth
+                    };
+                } else {
+                    const lastTab = rect.Stack[tabCount - 1];
+                    tab = {
+                        left: lastTab.right,
+                        width: 0,
+                        index: tabCount,
+                        positionRelativeToTab: AFTER
+                    };
+                }
+            }
+        } else if (rect.header.titleWidth) {
+            const tabWidth = rect.header.titleWidth;
+            tab = {
+                index: -1,
+                left: rect.left,
+                positionRelativeToTab: (x - rect.left) / tabWidth < 0.5 ? BEFORE : AFTER,
+                width: tabWidth
+            };
+        } else tab = {
+            left: rect.left,
+            width: 0,
+            positionRelativeToTab: BEFORE,
+            index: -1
+        };
+    } else position = getPositionWithinBox(x, y, rect, pctX, pctY);
+    return {
+        position: position,
+        x,
+        y,
+        closeToTheEdge,
+        tab
+    };
+}
+function getPositionWithinBox(x, y, rect, pctX, pctY) {
+    const centerBox = getCenteredBox(rect, 0.2);
+    if (boxContainsPoint(centerBox, x, y)) return CENTRE;
+    {
+        const quadrant = `${pctY < 0.5 ? "north" : "south"}${pctX < 0.5 ? "west" : "east"}`;
+        switch(quadrant){
+            case "northwest":
+                return pctX > pctY ? NORTH : WEST;
+            case "northeast":
+                return 1 - pctX > pctY ? NORTH : EAST;
+            case "southeast":
+                return pctX > pctY ? EAST : SOUTH;
+            case "southwest":
+                return 1 - pctX > pctY ? WEST : SOUTH;
+            default:
+        }
+    }
+}
+function getCenteredBox({ right, left, top, bottom }, pctSize) {
+    const pctOffset = (1 - pctSize) / 2;
+    const w = (right - left) * pctOffset;
+    const h = (bottom - top) * pctOffset;
+    return {
+        left: left + w,
+        top: top + h,
+        right: right - w,
+        bottom: bottom - h
+    };
+}
+function measureRootComponent(rootComponent, measurements, dropTargets) {
+    const { id, "data-path": dataPath, path = dataPath } = getProps(rootComponent);
+    const type = typeOf(rootComponent);
+    if (id && path) {
+        const [rect, el] = measureComponentDomElement(rootComponent);
+        measureComponent(rootComponent, rect, el, measurements);
+        if (isContainer(type)) collectChildMeasurements(rootComponent, measurements, dropTargets);
+    }
+}
+function measureComponent(component, rect, el, measurements) {
+    const { "data-path": dataPath, path = dataPath, header } = getProps(component);
+    measurements[path] = rect;
+    const type = typeOf(component);
+    if (header || "Stack" === type) {
+        const query = "Stack" === type ? ".vuuTabstrip" : ".vuuHeader";
+        const headerEl = el.querySelector(query);
+        if (headerEl) {
+            const { top, left, right, bottom } = headerEl.getBoundingClientRect();
+            measurements[path].header = {
+                top: Math.round(top),
+                left: Math.round(left),
+                right: Math.round(right),
+                bottom: Math.round(bottom)
+            };
+            if ("Stack" === type) measurements[path].Stack = Array.from(headerEl.querySelectorAll(".vuuTab")).map((tab)=>tab.getBoundingClientRect()).map(({ left, right })=>({
+                    left,
+                    right
+                }));
+            else {
+                const titleEl = headerEl.querySelector('[class^="vuuHeader-title"]');
+                const { header } = measurements[path];
+                if (titleEl && header) header.titleWidth = titleEl.clientWidth;
+            }
+        }
+    }
+    return measurements[path];
+}
+function collectChildMeasurements(component, measurements, dropTargets, preX = 0, posX = 0, preY = 0, posY = 0) {
+    const { children, "data-path": dataPath, path = dataPath, style, active = 0 } = getProps(component);
+    const type = typeOf(component);
+    const isFlexbox = "Flexbox" === type;
+    const isStack = "Stack" === type;
+    const isTower = isFlexbox && "column" === style.flexDirection;
+    const isTerrace = isFlexbox && "row" === style.flexDirection;
+    const childrenToMeasure = isStack ? children.filter((_child, idx)=>idx === active) : children.filter(omitDragging);
+    const childMeasurements = childrenToMeasure.map((child)=>{
+        const [rect, el] = measureComponentDomElement(child);
+        return [
+            {
+                ...rect,
+                top: rect.top - preY,
+                right: rect.right + posX,
+                bottom: rect.bottom + posY,
+                left: rect.left - preX
+            },
+            el,
+            child
+        ];
+    });
+    const expandedMeasurements = childMeasurements.map(([rect, el, child], i, all)=>{
+        let localPreX;
+        let localPosX;
+        let localPreY;
+        let localPosY;
+        let gapPre;
+        let gapPos;
+        const n = all.length - 1;
+        if (isTerrace) {
+            gapPre = 0 === i ? 0 : rect.left - all[i - 1][0].right;
+            gapPos = i === n ? 0 : all[i + 1][0].left - rect.right;
+            localPreX = 0 === i ? 0 : 0 === gapPre ? 0 : gapPre;
+            localPosX = i === n ? 0 : 0 === gapPos ? 0 : gapPos - gapPos / 2;
+            rect.left -= localPreX;
+            rect.right += localPosX;
+            localPreY = preY;
+            localPosY = posY;
+        } else if (isTower) {
+            gapPre = 0 === i ? 0 : rect.top - all[i - 1][0].bottom;
+            gapPos = i === n ? 0 : all[i + 1][0].top - rect.bottom;
+            localPreY = 0 === i ? 0 : 0 === gapPre ? 0 : gapPre;
+            localPosY = i === n ? 0 : 0 === gapPos ? 0 : gapPos - gapPos / 2;
+            rect.top -= localPreY;
+            rect.bottom += localPosY;
+            localPreX = preX;
+            localPosX = posX;
+        }
+        const componentMeasurements = measureComponent(child, rect, el, measurements);
+        const childType = typeOf(child);
+        if (isContainer(childType)) collectChildMeasurements(child, measurements, dropTargets, localPreX, localPosX, localPreY, localPosY);
+        return componentMeasurements;
+    });
+    if (childMeasurements.length) measurements[path].children = expandedMeasurements;
+}
+function omitDragging(component) {
+    const { id } = getProps(component);
+    const el = document.getElementById(id);
+    if (el) return "true" !== el.dataset.dragging;
+    console.warn(`BoxModel: no element found with id #${id}`);
+    return false;
+}
+function measureComponentDomElement(component) {
+    const { id } = getProps(component);
+    if (void 0 === id) throw Error("`BoxModel.measureComponentElement, component has no id");
+    const el = document.getElementById(id);
+    if (!el) throw Error("BoxModel.measureComponentElement,  no DOM element found for component");
+    const { top, left, right, bottom, height, width } = el.getBoundingClientRect();
+    let scrolling;
+    const type = typeOf(component);
+    if (isContainer(type)) {
+        const scrollHeight = el.scrollHeight;
+        if (scrollHeight > height) scrolling = {
+            id,
+            scrollHeight,
+            scrollTop: el.scrollTop
+        };
+    }
+    return [
+        {
+            top: Math.round(top),
+            left: Math.round(left),
+            right: Math.round(right),
+            bottom: Math.round(bottom),
+            height: Math.round(height),
+            width: Math.round(width),
+            scrolling
+        },
+        el,
+        component
+    ];
+}
+function allBoxesContainingPoint(component, measurements, x, y, dropTargets, boxes = []) {
+    const { children, "data-path": dataPath, path = dataPath } = getProps(component);
+    const type = typeOf(component);
+    const rect = measurements[path];
+    if (!boxContainsPoint(rect, x, y)) return boxes;
+    if (dropTargets && dropTargets.length) {
+        if (dropTargets.includes(path)) boxes.push(component);
+        else if (!dropTargets.some((dropTargetPath)=>dropTargetPath.startsWith(path))) return boxes;
+    } else boxes.push(component);
+    if (!isContainer(type)) return boxes;
+    if (rect.header && boxContainsPoint(rect.header, x, y)) return boxes;
+    if (rect.scrolling) scrollIntoViewIfNeccesary(rect, x, y);
+    for(let i = 0; i < children.length; i++){
+        if ("Stack" === type && component.props.active !== i) continue;
+        const nestedBoxes = allBoxesContainingPoint(children[i], measurements, x, y, dropTargets);
+        if (nestedBoxes.length) return boxes.concat(nestedBoxes);
+    }
+    return boxes;
+}
+function scrollIntoViewIfNeccesary({ top, bottom, scrolling }, x, y) {
+    if (!scrolling) return false;
+    {
+        const { id, scrollTop, scrollHeight } = scrolling;
+        const height = bottom - top;
+        if (0 === scrollTop && bottom - y < 50) {
+            const scrollMax = scrollHeight - height;
+            const el = document.getElementById(id);
+            el.scrollTo({
+                left: 0,
+                top: scrollMax,
+                behavior: "smooth"
+            });
+            scrolling.scrollTop = scrollMax;
+        } else {
+            if (!(scrollTop > 0) || !(y - top < 50)) return false;
+            const el = document.getElementById(id);
+            el.scrollTo({
+                left: 0,
+                top: 0,
+                behavior: "smooth"
+            });
+            scrolling.scrollTop = 0;
+        }
+    }
+}
+export { BoxModel, Position, RelativeDropPosition, getPosition, pointPositionWithinRect, positionValues };

package/src/drag-drop/DragState.js

@@ -0,0 +1,119 @@
+import { pointPositionWithinRect } from "./BoxModel.js";
+const SCALE_FACTOR = 0.4;
+class DragState {
+    constraint;
+    x;
+    y;
+    intrinsicSize;
+    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: zone.left - leadXScaleDiff,
+                    hi: zone.right - rect.width + trailXScaleDiff
+                },
+                y: {
+                    lo: zone.top - leadYScaleDiff,
+                    hi: zone.bottom - rect.height + trailYScaleDiff
+                }
+            },
+            mouse: {
+                x: {
+                    lo: zone.left + scaledWidth * pctX,
+                    hi: zone.right - scaledWidth * (1 - pctX)
+                },
+                y: {
+                    lo: zone.top + scaledHeight * pctY,
+                    hi: 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;
+    }
+    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 };

package/src/drag-drop/Draggable.js

@@ -0,0 +1,140 @@
+import { findTarget, followPath, getProps } from "../utils/index.js";
+import { BoxModel } from "./BoxModel.js";
+import { DragState } from "./DragState.js";
+import { DropTarget, identifyDropTarget } from "./DropTarget.js";
+import DropTargetRenderer 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 DropTargetRenderer();
+const SCALE_FACTOR = 0.4;
+function getDragContainer(rootContainer, dragContainerPath) {
+    if (dragContainerPath) return followPath(rootContainer, dragContainerPath);
+    return findTarget(rootContainer, (props)=>props.dropTarget);
+}
+const Draggable = {
+    handleMousedown (e, dragStartCallback, dragInstructions = {}) {
+        _dragStartCallback = dragStartCallback;
+        _dragInstructions = dragInstructions;
+        _dragStartX = e.clientX;
+        _dragStartY = e.clientY;
+        _dragThreshold = void 0 === dragInstructions.dragThreshold ? DEFAULT_DRAG_THRESHOLD : dragInstructions.dragThreshold;
+        if (0 === _dragThreshold) _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();
+    },
+    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 = 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));
+    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(100 * _dragState.x.mousePct);
+    const pctY = Math.round(100 * _dragState.y.mousePct);
+    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" : `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;
+    void 0 === newX && void 0 === newY || _dragMoveCallback?.(newX, newY);
+    if (_simpleDrag || void 0 === _dragContainer) return;
+    dropTarget = dragState.inBounds() ? identifyDropTarget(x, y, _dragContainer, _measurements, dragState.hasIntrinsicSize(), _validDropTargetPaths) : identifyDropTarget(dragState.dropX(), dragState.dropY(), _dragContainer, _measurements);
+    if (currentDropTarget) {
+        if (null == dropTarget || dropTarget.box !== currentDropTarget.box) _dropTarget = null;
+    }
+    if (dropTarget) {
+        _dropTargetRenderer.draw(dropTarget, dragState);
+        _dropTarget = dropTarget;
+    }
+}
+function dragKeydownHandler(evt) {
+    if ("Escape" === evt.key) {
+        _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 };