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

package/src/drag-drop/DropTarget.js

@@ -1,286 +0,0 @@
-import { getProps, typeOf } from "../utils/index.js";
-import { BoxModel, Position, RelativeDropPosition, getPosition, positionValues } from "./BoxModel.js";
-const isTabstrip = (dropTarget)=>dropTarget.pos.tab && "Stack" === typeOf(dropTarget.component) && dropTarget.pos.position.Header;
-const { north: north, south: south, east: east, west: west } = positionValues;
-const eastwest = east + west;
-const northsouth = north + south;
-class DropTarget {
-    active;
-    box;
-    clientRect;
-    component;
-    dropRect;
-    nextDropTarget;
-    pos;
-    constructor({ component, pos, clientRect, nextDropTarget }){
-        this.component = component;
-        this.pos = pos;
-        this.clientRect = clientRect;
-        this.nextDropTarget = nextDropTarget;
-        this.active = false;
-        this.dropRect = void 0;
-    }
-    targetTabPos(tab) {
-        const { left: tabLeft, width: tabWidth, positionRelativeToTab } = tab;
-        return positionRelativeToTab === RelativeDropPosition.BEFORE ? tabLeft : tabLeft + tabWidth;
-    }
-    getTargetDropOutline(lineWidth, dragState) {
-        if (this.pos.tab) return this.getDropTabOutline(lineWidth, this.pos.tab);
-        {
-            if (dragState && dragState.hasIntrinsicSize()) return this.getIntrinsicDropRect(dragState);
-            const [l, t, r, b] = this.getDropRectOutline(lineWidth, dragState);
-            return {
-                l,
-                t,
-                r,
-                b
-            };
-        }
-    }
-    getDropTabOutline(lineWidth, tab) {
-        const { clientRect: { top, left, right, bottom, header } } = this;
-        const inset = 0;
-        const gap = Math.round(lineWidth / 2) + inset;
-        const t = Math.round(top);
-        const l = Math.round(left + gap);
-        const r = Math.round(right - gap);
-        const b = Math.round(bottom - gap);
-        const tabLeft = this.targetTabPos(tab);
-        const tabWidth = 60;
-        const tabHeight = (header?.bottom ?? 0) - (header?.top ?? 0);
-        return {
-            l,
-            t,
-            r,
-            b,
-            tabLeft,
-            tabWidth,
-            tabHeight
-        };
-    }
-    getIntrinsicDropRect(dragState) {
-        const { pos, clientRect: rect } = this;
-        const { x, y } = dragState;
-        let height = dragState.intrinsicSize?.height ?? 0;
-        let width = dragState.intrinsicSize?.height ?? 0;
-        if (height && height > rect.height) {
-            console.log("DropTarget: we're going to blow the gaff");
-            height = rect.height;
-        } else if (width && width > rect.width) {
-            console.log("DropTarget: we're going to blow the gaff");
-            width = rect.width;
-        }
-        const left = Math.min(rect.right - width, Math.max(rect.left, Math.round(pos.x - x.mousePct * width)));
-        const top = Math.min(rect.bottom - height, Math.max(rect.top, Math.round(pos.y - y.mousePct * height)));
-        const [l, t, r, b] = this.dropRect = [
-            left,
-            top,
-            left + width,
-            top + height
-        ];
-        const guideLines = pos.position.EastOrWest ? [
-            l,
-            rect.top,
-            l,
-            rect.bottom,
-            r,
-            rect.top,
-            r,
-            rect.bottom
-        ] : [
-            rect.left,
-            t,
-            rect.right,
-            t,
-            rect.left,
-            b,
-            rect.right,
-            b
-        ];
-        return {
-            l,
-            r,
-            t,
-            b,
-            guideLines
-        };
-    }
-    getDropRectOutline(lineWidth, dragState) {
-        const { pos, clientRect: rect } = this;
-        const { width: suggestedWidth, height: suggestedHeight, position } = pos;
-        const { width: intrinsicWidth, height: intrinsicHeight } = dragState?.intrinsicSize ?? {};
-        const sizeHeight = intrinsicHeight ?? suggestedHeight ?? 0;
-        const sizeWidth = intrinsicWidth ?? suggestedWidth ?? 0;
-        this.dropRect = void 0;
-        const { top: t, left: l, right: r, bottom: b } = rect;
-        const inset = 0;
-        const gap = Math.round(lineWidth / 2) + inset;
-        switch(position){
-            case Position.North:
-            case Position.Header:
-                {
-                    const halfHeight = Math.round((b - t) / 2);
-                    const height = sizeHeight ? Math.min(halfHeight, Math.round(sizeHeight)) : halfHeight;
-                    return sizeWidth && l + sizeWidth < r ? [
-                        l + gap,
-                        t + gap,
-                        l + sizeWidth - gap,
-                        t + gap + height
-                    ] : [
-                        l + gap,
-                        t + gap,
-                        r - gap,
-                        t + gap + height
-                    ];
-                }
-            case Position.West:
-                {
-                    const halfWidth = Math.round((r - l) / 2);
-                    const width = sizeWidth ? Math.min(halfWidth, Math.round(sizeWidth)) : halfWidth;
-                    return sizeHeight && t + sizeHeight < b ? [
-                        l + gap,
-                        t + gap,
-                        l - gap + width,
-                        t + sizeHeight + gap
-                    ] : [
-                        l + gap,
-                        t + gap,
-                        l - gap + width,
-                        b - gap
-                    ];
-                }
-            case Position.East:
-                {
-                    const halfWidth = Math.round((r - l) / 2);
-                    const width = sizeWidth ? Math.min(halfWidth, Math.round(sizeWidth)) : halfWidth;
-                    return sizeHeight && t + sizeHeight < b ? [
-                        r - gap - width,
-                        t + gap,
-                        r - gap,
-                        t + sizeHeight + gap
-                    ] : [
-                        r - gap - width,
-                        t + gap,
-                        r - gap,
-                        b - gap
-                    ];
-                }
-            case Position.South:
-                {
-                    const halfHeight = Math.round((b - t) / 2);
-                    const height = sizeHeight ? Math.min(halfHeight, Math.round(sizeHeight)) : halfHeight;
-                    return sizeWidth && l + sizeWidth < r ? [
-                        l + gap,
-                        b - gap - height,
-                        l + sizeWidth - gap,
-                        b - gap
-                    ] : [
-                        l + gap,
-                        b - gap - height,
-                        r - gap,
-                        b - gap
-                    ];
-                }
-            case Position.Centre:
-                return [
-                    l + gap,
-                    t + gap,
-                    r - gap,
-                    b - gap
-                ];
-            default:
-                console.warn(`DropTarget does not recognize position ${position}`);
-                return null;
-        }
-    }
-    activate() {
-        this.active = true;
-        return this;
-    }
-    toArray() {
-        let dropTarget = this;
-        const dropTargets = [
-            dropTarget
-        ];
-        while(dropTarget = dropTarget.nextDropTarget)dropTargets.push(dropTarget);
-        return dropTargets;
-    }
-    static getActiveDropTarget(dropTarget) {
-        return null === dropTarget ? null : dropTarget?.active ? dropTarget : DropTarget.getActiveDropTarget(dropTarget.nextDropTarget);
-    }
-}
-function identifyDropTarget(x, y, rootLayout, measurements, intrinsicSize, validDropTargets) {
-    let dropTarget = null;
-    const allBoxesContainingPoint = BoxModel.allBoxesContainingPoint(rootLayout, measurements, x, y, validDropTargets);
-    if (allBoxesContainingPoint.length) {
-        const [component, ...containers] = allBoxesContainingPoint;
-        const { "data-path": dataPath, path = dataPath, "data-row-placeholder": isRowPlaceholder } = getProps(component);
-        const clientRect = measurements[path];
-        const placeholderOrientation = intrinsicSize && isRowPlaceholder ? "row" : void 0;
-        const pos = getPosition(x, y, clientRect, placeholderOrientation);
-        const box = measurements[path];
-        const nextDropTarget = ([nextTarget, ...targets])=>{
-            if (pos.position?.Header || pos.closeToTheEdge) {
-                const targetPosition = getTargetPosition(nextTarget, pos, box, measurements, x, y);
-                if (targetPosition) {
-                    const [containerPos, clientRect] = targetPosition;
-                    return new DropTarget({
-                        component: nextTarget,
-                        pos: containerPos,
-                        clientRect,
-                        nextDropTarget: nextDropTarget(targets) ?? null
-                    });
-                }
-                if (targets.length) return nextDropTarget(targets);
-            }
-        };
-        dropTarget = new DropTarget({
-            component,
-            pos,
-            clientRect,
-            nextDropTarget: nextDropTarget(containers) ?? null
-        }).activate();
-    }
-    return dropTarget;
-}
-function getTargetPosition(container, { closeToTheEdge, position }, box, measurements, x, y) {
-    if (!container || "LayoutContainer" === container.type) return;
-    const containingBox = measurements[container.props.path];
-    const closeToTop = closeToTheEdge & positionValues.north;
-    const closeToRight = closeToTheEdge & positionValues.east;
-    const closeToBottom = closeToTheEdge & positionValues.south;
-    const closeToLeft = closeToTheEdge & positionValues.west;
-    const atTop = (closeToTop || position.Header) && Math.round(box.top) === Math.round(containingBox.top);
-    const atRight = closeToRight && Math.round(box.right) === Math.round(containingBox.right);
-    const atBottom = closeToBottom && Math.round(box.bottom) === Math.round(containingBox.bottom);
-    const atLeft = closeToLeft && Math.round(box.left) === Math.round(containingBox.left);
-    if (atTop || atRight || atBottom || atLeft) {
-        const { "data-path": dataPath, path = dataPath } = container.props;
-        const clientRect = measurements[path];
-        const containerPos = getPosition(x, y, clientRect);
-        if ((isVBox(container) || isTabbedContainer(container)) && closeToTheEdge & eastwest) {
-            containerPos.width = 120;
-            return [
-                containerPos,
-                clientRect
-            ];
-        }
-        if ((isHBox(container) || isTabbedContainer(container)) && (position.Header || closeToTheEdge & northsouth)) {
-            containerPos.height = 120;
-            return [
-                containerPos,
-                clientRect
-            ];
-        }
-    }
-}
-function isTabbedContainer(component) {
-    return "Stack" === typeOf(component);
-}
-function isVBox(component) {
-    return "Flexbox" === typeOf(component) && "column" === component.props.style.flexDirection;
-}
-function isHBox(component) {
-    return "Flexbox" === typeOf(component) && "row" === component.props.style.flexDirection;
-}
-export { DropTarget, identifyDropTarget, isTabstrip };

package/src/drag-drop/DropTargetRenderer.js

@@ -1,275 +0,0 @@
-import { RelativeDropPosition } from "./BoxModel.js";
-let _hoverDropTarget = null;
-let _shiftedTab = null;
-const start = ([x, y])=>`M${x},${y}`;
-const point = ([x, y])=>`L${x},${y}`;
-const pathFromPoints = ([p1, ...points])=>`${start(p1)} ${points.map(point)}Z`;
-const pathFromGuideLines = (guideLines)=>{
-    if (!guideLines) return "";
-    {
-        const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;
-        return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;
-    }
-};
-function insertSVGRoot() {
-    if (null === document.getElementById("hw-drag-canvas")) {
-        const root = document.getElementById("root");
-        const container = document.createElement("div");
-        container.id = "hw-drag-canvas";
-        container.style.cssText = "visibility:hidden;z-index:10;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent";
-        container.innerHTML = `
-      <svg width="100%" height="100%" style="position: absolute;">
-        <path id="hw-drop-guides" style="fill: none; stroke: rgba(0, 0, 0, 0.3);stroke-dasharray: 2 3"/>
-        <path
-          id="vuu-drop-outline"
-          style="fill:rgba(0,0,255,.3);stroke:none;stroke-dasharray:4 2"
-          d="M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z">
-          <animate
-            attributeName="d"
-            id="hw-drop-outline-animate"
-            begin="indefinite"
-            dur="300ms"
-            fill="freeze"
-            to="M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z"
-          />
-        </path>
-      </svg>
-      `;
-        document.body.insertBefore(container, root);
-    }
-}
-class DropTargetCanvas {
-    currentPath = null;
-    tabMode = null;
-    constructor(){
-        insertSVGRoot();
-    }
-    prepare(dragRect, tabMode = "full-view") {
-        const dragCanvas = document.getElementById("hw-drag-canvas");
-        if (dragCanvas) dragCanvas.style.visibility = "visible";
-        else throw Error("DropTargetRenderer.prepare no drag canvas detected");
-        document.body.classList.add("drawing");
-        this.currentPath = null;
-        this.tabMode = tabMode;
-        const points = this.getPoints(0, 0, 0, 0);
-        const d = pathFromPoints(points);
-        const dropOutlinePath = document.getElementById("vuu-drop-outline");
-        dropOutlinePath?.setAttribute("d", d);
-        this.currentPath = d;
-    }
-    clear() {
-        _hoverDropTarget = null;
-        clearShiftedTab();
-        const dragCanvas = document.getElementById("hw-drag-canvas");
-        if (dragCanvas) dragCanvas.style.visibility = "hidden";
-    }
-    get hoverDropTarget() {
-        return _hoverDropTarget;
-    }
-    getPoints(x, y, width, height, tabLeft = 0, tabWidth = 0, tabHeight = 0) {
-        const tabOnly = "tab-only" === this.tabMode;
-        if (0 === tabWidth) return [
-            [
-                x,
-                y + tabHeight
-            ],
-            [
-                x,
-                y + tabHeight
-            ],
-            [
-                x,
-                y
-            ],
-            [
-                x + tabWidth,
-                y
-            ],
-            [
-                x + tabWidth,
-                y
-            ],
-            [
-                x + width,
-                y
-            ],
-            [
-                x + width,
-                y + height
-            ],
-            [
-                x,
-                y + height
-            ]
-        ];
-        if (tabOnly) {
-            const left = tabLeft;
-            return [
-                [
-                    left,
-                    y
-                ],
-                [
-                    left,
-                    y
-                ],
-                [
-                    left + tabWidth,
-                    y
-                ],
-                [
-                    left + tabWidth,
-                    y
-                ],
-                [
-                    left + tabWidth,
-                    y + tabHeight
-                ],
-                [
-                    left + tabWidth,
-                    y + tabHeight
-                ],
-                [
-                    left,
-                    y + tabHeight
-                ],
-                [
-                    left,
-                    y + tabHeight
-                ]
-            ];
-        }
-        if (0 === tabLeft) return [
-            [
-                x,
-                y + tabHeight
-            ],
-            [
-                x,
-                y + tabHeight
-            ],
-            [
-                x,
-                y
-            ],
-            [
-                x + tabWidth,
-                y
-            ],
-            [
-                x + tabWidth,
-                y + tabHeight
-            ],
-            [
-                x + width,
-                y + tabHeight
-            ],
-            [
-                x + width,
-                y + height
-            ],
-            [
-                x,
-                y + height
-            ]
-        ];
-        return [
-            [
-                x,
-                y + tabHeight
-            ],
-            [
-                x + tabLeft,
-                y + tabHeight
-            ],
-            [
-                x + tabLeft,
-                y
-            ],
-            [
-                x + tabLeft,
-                y
-            ],
-            [
-                x + tabLeft,
-                y + tabHeight
-            ],
-            [
-                x + width,
-                y + tabHeight
-            ],
-            [
-                x + width,
-                y + height
-            ],
-            [
-                x,
-                y + height
-            ]
-        ];
-    }
-    draw(dropTarget, dragState) {
-        const sameDropTarget = false;
-        if (null !== _hoverDropTarget) this.drawTarget(_hoverDropTarget);
-        else if (false === sameDropTarget) {
-            if (dropTarget.pos.tab) moveExistingTabs(dropTarget);
-            else if (_shiftedTab) clearShiftedTab();
-            this.drawTarget(dropTarget, dragState);
-        }
-    }
-    drawTarget(dropTarget, dragState) {
-        const lineWidth = 6;
-        const targetDropOutline = dropTarget.getTargetDropOutline(lineWidth, dragState);
-        if (targetDropOutline) {
-            const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } = targetDropOutline;
-            const w = r - l;
-            const h = b - t;
-            if (this.currentPath) {
-                const path = document.getElementById("vuu-drop-outline");
-                path?.setAttribute("d", this.currentPath);
-            }
-            const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);
-            const path = pathFromPoints(points);
-            const animation = document.getElementById("hw-drop-outline-animate");
-            animation?.setAttribute("to", path);
-            animation?.beginElement();
-            this.currentPath = path;
-            const dropGuidePath = document.getElementById("hw-drop-guides");
-            dropGuidePath?.setAttribute("d", pathFromGuideLines(guideLines));
-        }
-    }
-}
-const cssShiftRight = "transition:margin-left .4s ease-out;margin-left: 63px";
-const cssShiftBack = "transition:margin-left .4s ease-out;margin-left: 0px";
-function moveExistingTabs(dropTarget) {
-    const { AFTER, BEFORE } = RelativeDropPosition;
-    const { clientRect: { Stack }, pos: { tab } } = dropTarget;
-    const { id } = dropTarget.component.props;
-    let tabEl = null;
-    if (Stack && tab && tab.positionRelativeToTab !== AFTER) {
-        const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;
-        const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${tab.index + tabOffset})`;
-        tabEl = document.getElementById(id)?.querySelector(selector);
-        if (tabEl) {
-            if (null === _shiftedTab || _shiftedTab !== tabEl) {
-                tabEl.style.cssText = cssShiftRight;
-                if (_shiftedTab) _shiftedTab.style.cssText = cssShiftBack;
-                _shiftedTab = tabEl;
-            }
-        } else clearShiftedTab();
-    } else if (tab?.positionRelativeToTab === BEFORE) {
-        if (null === _shiftedTab) {
-            const selector = ".vuuHeader-title";
-            tabEl = document.getElementById(id)?.querySelector(selector);
-            tabEl.style.cssText = cssShiftRight;
-            _shiftedTab = tabEl;
-        }
-    } else clearShiftedTab();
-}
-function clearShiftedTab() {
-    if (_shiftedTab) {
-        _shiftedTab.style.cssText = cssShiftBack;
-        _shiftedTab = null;
-    }
-}
-export default DropTargetCanvas;

package/src/drag-drop/index.js

@@ -1,3 +0,0 @@
-export * from "./dragDropTypes.js";
-export * from "./Draggable.js";
-export * from "./DropTarget.js";

package/src/flexbox/Flexbox.css.js

@@ -1,45 +0,0 @@
-const css = `
-:root {
-  --hw-space-unit: 4px;
-  --hw-flex-gap: 3;
-  --hw-fluid-grid-col-bg: #c8c8c84d;
-}
-
-.hwFlexbox {
-  box-sizing: border-box;
-  gap: calc(var(--spacing) * var(--space));
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  overflow: hidden;
-}
-
-.hwFlexbox-column {
-  flex-direction: column;
-}
-
-.hwFlexbox-row {
-  flex-direction: row;
-}
-
-.hwFlexbox > .Splitter {
-  flex: none;
-}
-
-.hwFlexbox.full-page {
-  width: 100vw;
-  height: 100vh;
-}
-
-.flex-fill {
-  border-color: red;
-  flex: 1;
-}
-
-.vuuView.flex-fill {
-  border-color: red;
-}
-
-
-`;
-export default css;

package/src/flexbox/Flexbox.js

@@ -1,45 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useForkRef } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { forwardRef } from "react";
-import { useSplitterResizing } from "./useSplitterResizing.js";
-import Flexbox_0 from "./Flexbox.css";
-const classBase = "hwFlexbox";
-const Flexbox_Flexbox = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { breakPoints, children, column, className: classNameProp, flexFill, gap, fullPage, id, onSplitterMoved, resizeable, row, spacing, splitterSize, style, ...htmlAttributes } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-flexbox",
-        css: Flexbox_0,
-        window: targetWindow
-    });
-    const { content, rootRef } = useSplitterResizing({
-        children,
-        onSplitterMoved,
-        style
-    });
-    const className = clsx(classBase, classNameProp, {
-        [`${classBase}-column`]: column,
-        [`${classBase}-row`]: row,
-        "flex-fill": flexFill,
-        "full-page": fullPage
-    });
-    return /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: className,
-        "data-resizeable": resizeable || void 0,
-        id: id,
-        ref: useForkRef(rootRef, ref),
-        style: {
-            ...style,
-            gap,
-            "--spacing": spacing
-        },
-        children: content
-    });
-});
-Flexbox_Flexbox.displayName = "Flexbox";
-var flexbox_Flexbox = Flexbox_Flexbox;
-export default flexbox_Flexbox;

package/src/flexbox/FlexboxLayout.js

@@ -1,27 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { Action } from "../layout-action.js";
-import { useLayoutProviderDispatch } from "../layout-provider/index.js";
-import { registerComponent } from "@vuu-ui/vuu-utils";
-import Flexbox from "./Flexbox.js";
-const FlexboxLayout_FlexboxLayout = function(props) {
-    const { path } = props;
-    const dispatch = useLayoutProviderDispatch();
-    const handleSplitterMoved = useCallback((sizes)=>{
-        dispatch({
-            type: Action.SPLITTER_RESIZE,
-            path,
-            sizes
-        });
-    }, [
-        dispatch,
-        path
-    ]);
-    return /*#__PURE__*/ jsx(Flexbox, {
-        ...props,
-        onSplitterMoved: handleSplitterMoved
-    });
-};
-FlexboxLayout_FlexboxLayout.displayName = "Flexbox";
-registerComponent("Flexbox", FlexboxLayout_FlexboxLayout, "container");
-export { FlexboxLayout_FlexboxLayout as FlexboxLayout };