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

package/src/drag-drop/BoxModel.js

@@ -1,337 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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 };