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

package/src/drag-drop/DropTarget.js

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

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

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

package/src/flexbox/Flexbox.css.js

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

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

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