@babylonjs/shared-ui-components 7.34.1 → 7.34.3

package/popupHelper.js

@@ -0,0 +1,57 @@
+import { CopyStyles } from "./styleHelper.js";
+/**
+ * Create a popup window
+ * @param title default title for the popup
+ * @param options options for the popup
+ * @returns the parent control of the popup
+ */
+export function CreatePopup(title, options) {
+    const localOptions = {
+        width: 300,
+        height: 800,
+        ...options,
+    };
+    const windowCreationOptionsList = {
+        width: localOptions.width,
+        height: localOptions.height,
+        top: (window.innerHeight - localOptions.width) / 2 + window.screenY,
+        left: (window.innerWidth - localOptions.height) / 2 + window.screenX,
+    };
+    const windowCreationOptions = Object.keys(windowCreationOptionsList)
+        .map((key) => key + "=" + windowCreationOptionsList[key])
+        .join(",");
+    const popupWindow = window.open("", title, windowCreationOptions);
+    if (!popupWindow) {
+        return null;
+    }
+    const parentDocument = popupWindow.document;
+    // Font
+    const newLinkEl = parentDocument.createElement("link");
+    newLinkEl.rel = "stylesheet";
+    newLinkEl.href = "https://use.typekit.net/cta4xsb.css";
+    parentDocument.head.appendChild(newLinkEl);
+    parentDocument.title = title;
+    parentDocument.body.style.width = "100%";
+    parentDocument.body.style.height = "100%";
+    parentDocument.body.style.margin = "0";
+    parentDocument.body.style.padding = "0";
+    const parentControl = parentDocument.createElement("div");
+    parentControl.style.width = "100%";
+    parentControl.style.height = "100%";
+    parentControl.style.margin = "0";
+    parentControl.style.padding = "0";
+    if (localOptions.onParentControlCreateCallback) {
+        localOptions.onParentControlCreateCallback(parentControl);
+    }
+    popupWindow.document.body.appendChild(parentControl);
+    CopyStyles(window.document, parentDocument);
+    setTimeout(() => {
+        // need this for late bindings
+        CopyStyles(window.document, parentDocument);
+    }, 0);
+    if (localOptions.onWindowCreateCallback) {
+        localOptions.onWindowCreateCallback(popupWindow);
+    }
+    return parentControl;
+}
+//# sourceMappingURL=popupHelper.js.map

package/popupHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popupHelper.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/popupHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CACvB,KAAa,EACb,OAKE;IAEF,MAAM,YAAY,GAAG;QACjB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,GAAG,OAAO;KACb,CAAC;IAEF,MAAM,yBAAyB,GAAG;QAC9B,KAAK,EAAE,YAAY,CAAC,KAAK;QACzB,MAAM,EAAE,YAAY,CAAC,MAAM;QAC3B,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,OAAO;QACnE,IAAI,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,OAAO;KACvE,CAAC;IAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC;SAC/D,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,GAAG,GAAI,yBAAiC,CAAC,GAAG,CAAC,CAAC;SACjE,IAAI,CAAC,GAAG,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC;IAClE,IAAI,CAAC,WAAW,EAAE;QACd,OAAO,IAAI,CAAC;KACf;IAED,MAAM,cAAc,GAAG,WAAW,CAAC,QAAQ,CAAC;IAE5C,OAAO;IACP,MAAM,SAAS,GAAG,cAAc,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,GAAG,YAAY,CAAC;IAC7B,SAAS,CAAC,IAAI,GAAG,qCAAqC,CAAC;IACvD,cAAc,CAAC,IAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAE5C,cAAc,CAAC,KAAK,GAAG,KAAK,CAAC;IAC7B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IACzC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IAC1C,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACvC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAExC,MAAM,aAAa,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1D,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IACnC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IACpC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACjC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAElC,IAAI,YAAY,CAAC,6BAA6B,EAAE;QAC5C,YAAY,CAAC,6BAA6B,CAAC,aAAa,CAAC,CAAC;KAC7D;IAED,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACrD,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IAC5C,UAAU,CAAC,GAAG,EAAE;QACZ,8BAA8B;QAC9B,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,CAAC,CAAC;IAEN,IAAI,YAAY,CAAC,sBAAsB,EAAE;QACrC,YAAY,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC;KACpD;IAED,OAAO,aAAa,CAAC;AACzB,CAAC","sourcesContent":["import { CopyStyles } from \"./styleHelper\";\r\n\r\n/**\r\n * Create a popup window\r\n * @param title default title for the popup\r\n * @param options options for the popup\r\n * @returns the parent control of the popup\r\n */\r\nexport function CreatePopup(\r\n    title: string,\r\n    options: Partial<{\r\n        onParentControlCreateCallback?: (parentControl: HTMLDivElement) => void;\r\n        onWindowCreateCallback?: (newWindow: Window) => void;\r\n        width?: number;\r\n        height?: number;\r\n    }>\r\n) {\r\n    const localOptions = {\r\n        width: 300,\r\n        height: 800,\r\n        ...options,\r\n    };\r\n\r\n    const windowCreationOptionsList = {\r\n        width: localOptions.width,\r\n        height: localOptions.height,\r\n        top: (window.innerHeight - localOptions.width) / 2 + window.screenY,\r\n        left: (window.innerWidth - localOptions.height) / 2 + window.screenX,\r\n    };\r\n\r\n    const windowCreationOptions = Object.keys(windowCreationOptionsList)\r\n        .map((key) => key + \"=\" + (windowCreationOptionsList as any)[key])\r\n        .join(\",\");\r\n\r\n    const popupWindow = window.open(\"\", title, windowCreationOptions);\r\n    if (!popupWindow) {\r\n        return null;\r\n    }\r\n\r\n    const parentDocument = popupWindow.document;\r\n\r\n    // Font\r\n    const newLinkEl = parentDocument.createElement(\"link\");\r\n\r\n    newLinkEl.rel = \"stylesheet\";\r\n    newLinkEl.href = \"https://use.typekit.net/cta4xsb.css\";\r\n    parentDocument.head!.appendChild(newLinkEl);\r\n\r\n    parentDocument.title = title;\r\n    parentDocument.body.style.width = \"100%\";\r\n    parentDocument.body.style.height = \"100%\";\r\n    parentDocument.body.style.margin = \"0\";\r\n    parentDocument.body.style.padding = \"0\";\r\n\r\n    const parentControl = parentDocument.createElement(\"div\");\r\n    parentControl.style.width = \"100%\";\r\n    parentControl.style.height = \"100%\";\r\n    parentControl.style.margin = \"0\";\r\n    parentControl.style.padding = \"0\";\r\n\r\n    if (localOptions.onParentControlCreateCallback) {\r\n        localOptions.onParentControlCreateCallback(parentControl);\r\n    }\r\n\r\n    popupWindow.document.body.appendChild(parentControl);\r\n    CopyStyles(window.document, parentDocument);\r\n    setTimeout(() => {\r\n        // need this for late bindings\r\n        CopyStyles(window.document, parentDocument);\r\n    }, 0);\r\n\r\n    if (localOptions.onWindowCreateCallback) {\r\n        localOptions.onWindowCreateCallback(popupWindow);\r\n    }\r\n\r\n    return parentControl;\r\n}\r\n"]}

package/split/splitContainer.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+import { SplitDirection } from "./splitContext";
+/**
+ * Split container properties
+ */
+export interface ISplitContainerProps {
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Split direction
+     */
+    direction: SplitDirection;
+    /**
+     * Minimum size for the floating elements
+     */
+    floatingMinSize?: number;
+    /**
+     * RefObject to the root div element
+     */
+    containerRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Optional class name
+     */
+    className?: string;
+    /**
+     * Pointer down
+     * @param event pointer events
+     */
+    onPointerDown?: (event: React.PointerEvent) => void;
+    /**
+     * Pointer move
+     * @param event pointer events
+     */
+    onPointerMove?: (event: React.PointerEvent) => void;
+    /**
+     * Pointer up
+     * @param event pointer events
+     */
+    onPointerUp?: (event: React.PointerEvent) => void;
+    /**
+     * Drop
+     * @param event drag events
+     */
+    onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+    /**
+     * Drag over
+     * @param event drag events
+     */
+    onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;
+}
+/**
+ * Creates a split container component
+ * @param props defines the split container properties
+ * @returns the split container component
+ */
+export declare const SplitContainer: React.FC<ISplitContainerProps>;

package/split/splitContainer.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import styles from "./splitContainer.module.scss";
+import { ControlledSize, SplitDirection, SplitContext } from "./splitContext.js";
+/**
+ * Creates a split container component
+ * @param props defines the split container properties
+ * @returns the split container component
+ */
+export const SplitContainer = (props) => {
+    const elementRef = props.containerRef || useRef(null);
+    const sizes = [];
+    const floatingCells = [];
+    const noInitialSizes = [];
+    const floatingMinSize = props.floatingMinSize || 200;
+    const controllers = [];
+    const minSizes = [];
+    const maxSizes = [];
+    const buildGridDefinition = () => {
+        if (!elementRef.current) {
+            return;
+        }
+        const children = elementRef.current.children;
+        let gridIndex = 1;
+        const pickArray = Array.from(children);
+        let gridDefinition = "";
+        for (const child of children) {
+            const childElement = child;
+            if (child.classList.contains(styles["splitter"])) {
+                gridDefinition += "auto ";
+            }
+            else {
+                const sourceIndex = pickArray.indexOf(child);
+                if (floatingCells[sourceIndex] || noInitialSizes[sourceIndex]) {
+                    gridDefinition += "1fr ";
+                }
+                else {
+                    gridDefinition += "auto ";
+                }
+            }
+            if (props.direction === SplitDirection.Horizontal) {
+                childElement.style.gridRow = "1";
+                childElement.style.gridColumn = gridIndex.toString();
+            }
+            else {
+                childElement.style.gridColumn = "1";
+                childElement.style.gridRow = gridIndex.toString();
+            }
+            gridIndex++;
+        }
+        if (props.direction === SplitDirection.Horizontal) {
+            elementRef.current.style.gridTemplateRows = "100%";
+            elementRef.current.style.gridTemplateColumns = gridDefinition;
+        }
+        else {
+            elementRef.current.style.gridTemplateColumns = "100%";
+            elementRef.current.style.gridTemplateRows = gridDefinition;
+        }
+    };
+    const handleResize = () => {
+        if (!elementRef.current) {
+            return;
+        }
+        // Check if we have enough room for everyone
+        const children = elementRef.current.children;
+        for (let i = 0; i < children.length; i++) {
+            if (!floatingCells[i]) {
+                continue;
+            }
+            const child = children[i];
+            let childsize = 0;
+            if (props.direction === SplitDirection.Horizontal) {
+                childsize = child.getBoundingClientRect().width;
+            }
+            else {
+                childsize = child.getBoundingClientRect().height;
+            }
+            if (childsize < floatingMinSize) {
+                const missing = Math.floor(floatingMinSize - childsize);
+                let done = 0;
+                // picking the controller in order and try to reduce their size to fit
+                for (let j = 0; j < controllers[i].length; j++) {
+                    const controllerIndex = controllers[i][j];
+                    const controller = children[controllerIndex];
+                    const currentSize = props.direction === SplitDirection.Horizontal ? controller.getBoundingClientRect().width : controller.getBoundingClientRect().height;
+                    let newSize = currentSize - missing;
+                    if (minSizes[controllerIndex]) {
+                        newSize = Math.max(newSize, minSizes[controllerIndex]);
+                    }
+                    if (props.direction === SplitDirection.Horizontal) {
+                        controller.style.width = `${newSize}px`;
+                    }
+                    else {
+                        controller.style.height = `${newSize}px`;
+                    }
+                    done += currentSize - newSize;
+                    if (done === missing) {
+                        // We made it
+                        break;
+                    }
+                }
+            }
+        }
+    };
+    useEffect(() => {
+        buildGridDefinition();
+        // Add event listener for window resize
+        window.addEventListener("resize", handleResize);
+        // Cleanup the event listener on component unmount
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    const drag = (offset, source, controlledSide) => {
+        if (!elementRef.current) {
+            return;
+        }
+        const children = elementRef.current.children;
+        const childArray = Array.from(children);
+        const sourceIndex = childArray.indexOf(source);
+        if (sourceIndex <= 0) {
+            return;
+        }
+        let current = 0;
+        if (controlledSide === ControlledSize.First) {
+            current = sourceIndex - 1;
+        }
+        else {
+            current = sourceIndex + 1;
+        }
+        const minSize = minSizes[current] || 0;
+        const maxSize = maxSizes[current];
+        noInitialSizes[current] = false;
+        buildGridDefinition();
+        let newSize = Math.floor(controlledSide === ControlledSize.First ? sizes[current] + offset : sizes[current] - offset);
+        // Min size check
+        if (newSize < minSize) {
+            newSize = minSize;
+        }
+        // Max size check
+        if (maxSize && newSize > maxSize) {
+            newSize = maxSize;
+        }
+        // Max size check across the whole container
+        const maxContainerSize = sizes.reduce((a, b) => a + b, 0) || 0;
+        let totalSize = 0;
+        let totalFloating = 0;
+        for (let i = 0; i < children.length; i++) {
+            if (floatingCells[i]) {
+                totalFloating++;
+            }
+            else {
+                totalSize += i === current ? newSize : sizes[i];
+            }
+        }
+        if (maxContainerSize - totalSize < floatingMinSize * totalFloating) {
+            newSize = maxContainerSize - floatingMinSize * totalFloating;
+        }
+        if (props.direction === SplitDirection.Horizontal) {
+            childArray[current].style.width = `${newSize}px`;
+        }
+        else {
+            childArray[current].style.height = `${newSize}px`;
+        }
+    };
+    const beginDrag = () => {
+        if (!elementRef.current) {
+            return;
+        }
+        const children = elementRef.current.children;
+        sizes.length = 0;
+        for (const child of children) {
+            const childElement = child;
+            if (props.direction === SplitDirection.Horizontal) {
+                sizes.push(childElement.getBoundingClientRect().width);
+            }
+            else {
+                sizes.push(childElement.getBoundingClientRect().height);
+            }
+        }
+    };
+    const endDrag = () => {
+        sizes.length = 0;
+    };
+    // We assume splitter are not flagging floating cells in a different way
+    const sync = (source, controlledSide, size, minSize, maxSize) => {
+        if (!elementRef.current) {
+            return;
+        }
+        const children = elementRef.current.children;
+        const childArray = Array.from(children);
+        const sourceIndex = childArray.indexOf(source);
+        if (sourceIndex <= 0) {
+            return;
+        }
+        let current = 0;
+        let other = 0;
+        if (controlledSide === ControlledSize.First) {
+            current = sourceIndex - 1;
+            other = sourceIndex + 1;
+        }
+        else {
+            current = sourceIndex + 1;
+            other = sourceIndex - 1;
+        }
+        if (size !== undefined) {
+            const sizeString = `${size | 0}px`;
+            if (props.direction === SplitDirection.Horizontal) {
+                childArray[current].style.width = sizeString;
+            }
+            else {
+                childArray[current].style.height = sizeString;
+            }
+        }
+        else {
+            noInitialSizes[current] = true;
+        }
+        if (minSize !== undefined) {
+            minSizes[current] = minSize;
+        }
+        if (maxSize !== undefined) {
+            maxSizes[current] = maxSize;
+        }
+        if (!controllers[other]) {
+            controllers[other] = [];
+        }
+        controllers[other].push(current);
+        floatingCells[other] = true;
+    };
+    return (_jsx(SplitContext.Provider, { value: { direction: props.direction, drag, beginDrag, endDrag, sync }, children: _jsx("div", { id: props.id, className: styles["split-container"] + " " + props.className, ref: elementRef, onPointerDown: (evt) => props.onPointerDown && props.onPointerDown(evt), onPointerMove: (evt) => props.onPointerMove && props.onPointerMove(evt), onPointerUp: (evt) => props.onPointerUp && props.onPointerUp(evt), onDrop: (evt) => props.onDrop && props.onDrop(evt), onDragOver: (evt) => props.onDragOver && props.onDragOver(evt), children: props.children }) }));
+};
+//# sourceMappingURL=splitContainer.js.map

package/split/splitContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitContainer.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/split/splitContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from \"react\";\r\nimport styles from \"./splitContainer.module.scss\";\r\nimport { ControlledSize, SplitDirection, SplitContext } from \"./splitContext\";\r\n\r\n/**\r\n * Split container properties\r\n */\r\nexport interface ISplitContainerProps {\r\n    /**\r\n     * Unique identifier\r\n     */\r\n    id?: string;\r\n\r\n    /**\r\n     * Split direction\r\n     */\r\n    direction: SplitDirection;\r\n\r\n    /**\r\n     * Minimum size for the floating elements\r\n     */\r\n    floatingMinSize?: number;\r\n\r\n    /**\r\n     * RefObject to the root div element\r\n     */\r\n    containerRef?: React.RefObject<HTMLDivElement>;\r\n\r\n    /**\r\n     * Optional class name\r\n     */\r\n    className?: string;\r\n\r\n    /**\r\n     * Pointer down\r\n     * @param event pointer events\r\n     */\r\n    onPointerDown?: (event: React.PointerEvent) => void;\r\n\r\n    /**\r\n     * Pointer move\r\n     * @param event pointer events\r\n     */\r\n    onPointerMove?: (event: React.PointerEvent) => void;\r\n\r\n    /**\r\n     * Pointer up\r\n     * @param event pointer events\r\n     */\r\n    onPointerUp?: (event: React.PointerEvent) => void;\r\n\r\n    /**\r\n     * Drop\r\n     * @param event drag events\r\n     */\r\n    onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n\r\n    /**\r\n     * Drag over\r\n     * @param event drag events\r\n     */\r\n    onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n}\r\n\r\n/**\r\n * Creates a split container component\r\n * @param props defines the split container properties\r\n * @returns the split container component\r\n */\r\nexport const SplitContainer: React.FC<ISplitContainerProps> = (props) => {\r\n    const elementRef: React.RefObject<HTMLDivElement> = props.containerRef || useRef(null);\r\n    const sizes: number[] = [];\r\n    const floatingCells: boolean[] = [];\r\n    const noInitialSizes: boolean[] = [];\r\n    const floatingMinSize = props.floatingMinSize || 200;\r\n    const controllers: number[][] = [];\r\n    const minSizes: number[] = [];\r\n    const maxSizes: number[] = [];\r\n\r\n    const buildGridDefinition = () => {\r\n        if (!elementRef.current) {\r\n            return;\r\n        }\r\n        const children = elementRef.current.children;\r\n\r\n        let gridIndex = 1;\r\n        const pickArray = Array.from(children);\r\n        let gridDefinition = \"\";\r\n        for (const child of children) {\r\n            const childElement = child as HTMLElement;\r\n            if (child.classList.contains(styles[\"splitter\"])) {\r\n                gridDefinition += \"auto \";\r\n            } else {\r\n                const sourceIndex = pickArray.indexOf(child);\r\n                if (floatingCells[sourceIndex] || noInitialSizes[sourceIndex]) {\r\n                    gridDefinition += \"1fr \";\r\n                } else {\r\n                    gridDefinition += \"auto \";\r\n                }\r\n            }\r\n\r\n            if (props.direction === SplitDirection.Horizontal) {\r\n                childElement.style.gridRow = \"1\";\r\n                childElement.style.gridColumn = gridIndex.toString();\r\n            } else {\r\n                childElement.style.gridColumn = \"1\";\r\n                childElement.style.gridRow = gridIndex.toString();\r\n            }\r\n\r\n            gridIndex++;\r\n        }\r\n\r\n        if (props.direction === SplitDirection.Horizontal) {\r\n            elementRef.current.style.gridTemplateRows = \"100%\";\r\n            elementRef.current.style.gridTemplateColumns = gridDefinition;\r\n        } else {\r\n            elementRef.current.style.gridTemplateColumns = \"100%\";\r\n            elementRef.current.style.gridTemplateRows = gridDefinition;\r\n        }\r\n    };\r\n\r\n    const handleResize = () => {\r\n        if (!elementRef.current) {\r\n            return;\r\n        }\r\n\r\n        // Check if we have enough room for everyone\r\n        const children = elementRef.current.children;\r\n        for (let i = 0; i < children.length; i++) {\r\n            if (!floatingCells[i]) {\r\n                continue;\r\n            }\r\n\r\n            const child = children[i] as HTMLElement;\r\n            let childsize = 0;\r\n            if (props.direction === SplitDirection.Horizontal) {\r\n                childsize = child.getBoundingClientRect().width;\r\n            } else {\r\n                childsize = child.getBoundingClientRect().height;\r\n            }\r\n\r\n            if (childsize < floatingMinSize) {\r\n                const missing = Math.floor(floatingMinSize - childsize);\r\n                let done = 0;\r\n\r\n                // picking the controller in order and try to reduce their size to fit\r\n                for (let j = 0; j < controllers[i].length; j++) {\r\n                    const controllerIndex = controllers[i][j];\r\n                    const controller = children[controllerIndex] as HTMLElement;\r\n                    const currentSize = props.direction === SplitDirection.Horizontal ? controller.getBoundingClientRect().width : controller.getBoundingClientRect().height;\r\n                    let newSize = currentSize - missing;\r\n                    if (minSizes[controllerIndex]) {\r\n                        newSize = Math.max(newSize, minSizes[controllerIndex]);\r\n                    }\r\n                    if (props.direction === SplitDirection.Horizontal) {\r\n                        controller.style.width = `${newSize}px`;\r\n                    } else {\r\n                        controller.style.height = `${newSize}px`;\r\n                    }\r\n\r\n                    done += currentSize - newSize;\r\n\r\n                    if (done === missing) {\r\n                        // We made it\r\n                        break;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        buildGridDefinition();\r\n\r\n        // Add event listener for window resize\r\n        window.addEventListener(\"resize\", handleResize);\r\n\r\n        // Cleanup the event listener on component unmount\r\n        return () => {\r\n            window.removeEventListener(\"resize\", handleResize);\r\n        };\r\n    }, []);\r\n\r\n    const drag = (offset: number, source: HTMLElement, controlledSide: ControlledSize) => {\r\n        if (!elementRef.current) {\r\n            return;\r\n        }\r\n\r\n        const children = elementRef.current.children;\r\n        const childArray = Array.from(children) as HTMLElement[];\r\n        const sourceIndex = childArray.indexOf(source);\r\n        if (sourceIndex <= 0) {\r\n            return;\r\n        }\r\n\r\n        let current = 0;\r\n        if (controlledSide === ControlledSize.First) {\r\n            current = sourceIndex - 1;\r\n        } else {\r\n            current = sourceIndex + 1;\r\n        }\r\n        const minSize = minSizes[current] || 0;\r\n        const maxSize = maxSizes[current];\r\n\r\n        noInitialSizes[current] = false;\r\n        buildGridDefinition();\r\n\r\n        let newSize = Math.floor(controlledSide === ControlledSize.First ? sizes[current] + offset : sizes[current] - offset);\r\n\r\n        // Min size check\r\n        if (newSize < minSize) {\r\n            newSize = minSize;\r\n        }\r\n\r\n        // Max size check\r\n        if (maxSize && newSize > maxSize) {\r\n            newSize = maxSize;\r\n        }\r\n\r\n        // Max size check across the whole container\r\n        const maxContainerSize = sizes.reduce((a, b) => a + b, 0) || 0;\r\n        let totalSize = 0;\r\n        let totalFloating = 0;\r\n        for (let i = 0; i < children.length; i++) {\r\n            if (floatingCells[i]) {\r\n                totalFloating++;\r\n            } else {\r\n                totalSize += i === current ? newSize : sizes[i];\r\n            }\r\n        }\r\n\r\n        if (maxContainerSize - totalSize < floatingMinSize * totalFloating) {\r\n            newSize = maxContainerSize - floatingMinSize * totalFloating;\r\n        }\r\n\r\n        if (props.direction === SplitDirection.Horizontal) {\r\n            childArray[current].style.width = `${newSize}px`;\r\n        } else {\r\n            childArray[current].style.height = `${newSize}px`;\r\n        }\r\n    };\r\n\r\n    const beginDrag = () => {\r\n        if (!elementRef.current) {\r\n            return;\r\n        }\r\n        const children = elementRef.current.children;\r\n        sizes.length = 0;\r\n        for (const child of children) {\r\n            const childElement = child as HTMLElement;\r\n\r\n            if (props.direction === SplitDirection.Horizontal) {\r\n                sizes.push(childElement.getBoundingClientRect().width);\r\n            } else {\r\n                sizes.push(childElement.getBoundingClientRect().height);\r\n            }\r\n        }\r\n    };\r\n\r\n    const endDrag = () => {\r\n        sizes.length = 0;\r\n    };\r\n\r\n    // We assume splitter are not flagging floating cells in a different way\r\n    const sync = (source: HTMLElement, controlledSide: ControlledSize, size?: number, minSize?: number, maxSize?: number) => {\r\n        if (!elementRef.current) {\r\n            return;\r\n        }\r\n\r\n        const children = elementRef.current.children;\r\n        const childArray = Array.from(children) as HTMLElement[];\r\n        const sourceIndex = childArray.indexOf(source);\r\n        if (sourceIndex <= 0) {\r\n            return;\r\n        }\r\n\r\n        let current = 0;\r\n        let other = 0;\r\n        if (controlledSide === ControlledSize.First) {\r\n            current = sourceIndex - 1;\r\n            other = sourceIndex + 1;\r\n        } else {\r\n            current = sourceIndex + 1;\r\n            other = sourceIndex - 1;\r\n        }\r\n\r\n        if (size !== undefined) {\r\n            const sizeString = `${size | 0}px`;\r\n\r\n            if (props.direction === SplitDirection.Horizontal) {\r\n                childArray[current].style.width = sizeString;\r\n            } else {\r\n                childArray[current].style.height = sizeString;\r\n            }\r\n        } else {\r\n            noInitialSizes[current] = true;\r\n        }\r\n\r\n        if (minSize !== undefined) {\r\n            minSizes[current] = minSize;\r\n        }\r\n\r\n        if (maxSize !== undefined) {\r\n            maxSizes[current] = maxSize;\r\n        }\r\n\r\n        if (!controllers[other]) {\r\n            controllers[other] = [];\r\n        }\r\n        controllers[other].push(current);\r\n        floatingCells[other] = true;\r\n    };\r\n\r\n    return (\r\n        <SplitContext.Provider value={{ direction: props.direction, drag, beginDrag, endDrag, sync }}>\r\n            <div\r\n                id={props.id}\r\n                className={styles[\"split-container\"] + \" \" + props.className}\r\n                ref={elementRef}\r\n                onPointerDown={(evt) => props.onPointerDown && props.onPointerDown(evt)}\r\n                onPointerMove={(evt) => props.onPointerMove && props.onPointerMove(evt)}\r\n                onPointerUp={(evt) => props.onPointerUp && props.onPointerUp(evt)}\r\n                onDrop={(evt) => props.onDrop && props.onDrop(evt)}\r\n                onDragOver={(evt) => props.onDragOver && props.onDragOver(evt)}\r\n            >\r\n                {props.children}\r\n            </div>\r\n        </SplitContext.Provider>\r\n    );\r\n};\r\n"]}

package/split/splitContainer.module.scss

@@ -0,0 +1,25 @@
+:local .split-container {
+    display: grid;
+
+    .splitter {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        background-color: #444;
+        border: 0px;
+        overlay: hidden;
+
+        &.vertical {
+            cursor: row-resize;
+        }
+
+        &.horizontal {
+            cursor: col-resize;
+        }
+
+        &:hover {
+            background-color: #666;
+        }
+    }
+}

package/split/splitContext.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+export declare enum ControlledSize {
+    First = 0,
+    Second = 1
+}
+export declare enum SplitDirection {
+    Horizontal = 0,
+    Vertical = 1
+}
+/**
+ * Context used to share data with splitters
+ */
+export interface ISplitContext {
+    /**
+     * Split direction
+     */
+    direction: SplitDirection;
+    /**
+     * Function called by splitters to update the offset
+     * @param offset new offet
+     * @param source source element
+     * @param controlledSide defined controlled element
+     */
+    drag: (offset: number, source: HTMLElement, controlledSide: ControlledSize) => void;
+    /**
+     * Function called by splitters to begin dragging
+     */
+    beginDrag: () => void;
+    /**
+     * Function called by splitters to end dragging
+     */
+    endDrag: () => void;
+    /**
+     * Sync sizes for the elements
+     * @param source source element
+     * @param controlledSide defined controlled element
+     * @param size size of the controlled element
+     * @param minSize minimum size for the controlled element
+     * @param maxSize maximum size for the controlled element
+     */
+    sync: (source: HTMLElement, controlledSide: ControlledSize, size?: number, minSize?: number, maxSize?: number) => void;
+}
+export declare const SplitContext: import("react").Context<ISplitContext>;

package/split/splitContext.js

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+export var ControlledSize;
+(function (ControlledSize) {
+    ControlledSize[ControlledSize["First"] = 0] = "First";
+    ControlledSize[ControlledSize["Second"] = 1] = "Second";
+})(ControlledSize || (ControlledSize = {}));
+export var SplitDirection;
+(function (SplitDirection) {
+    SplitDirection[SplitDirection["Horizontal"] = 0] = "Horizontal";
+    SplitDirection[SplitDirection["Vertical"] = 1] = "Vertical";
+})(SplitDirection || (SplitDirection = {}));
+// Create the context
+export const SplitContext = createContext({ direction: SplitDirection.Horizontal, drag: () => { }, beginDrag: () => { }, endDrag: () => { }, sync: () => { } });
+//# sourceMappingURL=splitContext.js.map

package/split/splitContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitContext.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/split/splitContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qDAAK,CAAA;IACL,uDAAM,CAAA;AACV,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,+DAAU,CAAA;IACV,2DAAQ,CAAA;AACZ,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAqCD,qBAAqB;AACrB,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAgB,EAAE,SAAS,EAAE,cAAc,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\r\n\r\nexport enum ControlledSize {\r\n    First,\r\n    Second,\r\n}\r\n\r\nexport enum SplitDirection {\r\n    Horizontal,\r\n    Vertical,\r\n}\r\n\r\n/**\r\n * Context used to share data with splitters\r\n */\r\nexport interface ISplitContext {\r\n    /**\r\n     * Split direction\r\n     */\r\n    direction: SplitDirection;\r\n    /**\r\n     * Function called by splitters to update the offset\r\n     * @param offset new offet\r\n     * @param source source element\r\n     * @param controlledSide defined controlled element\r\n     */\r\n    drag: (offset: number, source: HTMLElement, controlledSide: ControlledSize) => void;\r\n    /**\r\n     * Function called by splitters to begin dragging\r\n     */\r\n    beginDrag: () => void;\r\n    /**\r\n     * Function called by splitters to end dragging\r\n     */\r\n    endDrag: () => void;\r\n\r\n    /**\r\n     * Sync sizes for the elements\r\n     * @param source source element\r\n     * @param controlledSide defined controlled element\r\n     * @param size size of the controlled element\r\n     * @param minSize minimum size for the controlled element\r\n     * @param maxSize maximum size for the controlled element\r\n     */\r\n    sync: (source: HTMLElement, controlledSide: ControlledSize, size?: number, minSize?: number, maxSize?: number) => void;\r\n}\r\n\r\n// Create the context\r\nexport const SplitContext = createContext<ISplitContext>({ direction: SplitDirection.Horizontal, drag: () => {}, beginDrag: () => {}, endDrag: () => {}, sync: () => {} });\r\n"]}

package/split/splitter.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import type { ControlledSize } from "./splitContext";
+/**
+ * Splitter component properties
+ */
+export interface ISplitterProps {
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Splitter size
+     */
+    size: number;
+    /**
+     * Minimum size for the controlled element
+     */
+    minSize?: number;
+    /**
+     * Maximum size for the controlled element
+     */
+    maxSize?: number;
+    /**
+     * Initial size for the controlled element
+     */
+    initialSize?: number;
+    /**
+     * Defines the controlled side
+     */
+    controlledSide: ControlledSize;
+    /**
+     * refObject to the splitter element
+     */
+    refObject?: React.RefObject<HTMLDivElement>;
+}
+/**
+ * Creates a splitter component
+ * @param props defines the splitter properties
+ * @returns the splitter component
+ */
+export declare const Splitter: React.FC<ISplitterProps>;

package/split/splitter.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import styles from "./splitContainer.module.scss";
+import { SplitContext, SplitDirection } from "./splitContext.js";
+/**
+ * Creates a splitter component
+ * @param props defines the splitter properties
+ * @returns the splitter component
+ */
+export const Splitter = (props) => {
+    const elementRef = props.refObject || useRef(null);
+    const splitContext = useContext(SplitContext);
+    let isCaptured = false;
+    let startValue;
+    useEffect(() => {
+        if (!elementRef.current) {
+            return;
+        }
+        if (splitContext.direction === SplitDirection.Horizontal) {
+            elementRef.current.style.width = `${props.size}px`;
+            elementRef.current.style.height = `100%`;
+            elementRef.current.classList.add(styles["horizontal"]);
+        }
+        else {
+            elementRef.current.style.height = `${props.size}px`;
+            elementRef.current.style.width = `100%`;
+            elementRef.current.classList.add(styles["vertical"]);
+        }
+        splitContext.sync(elementRef.current, props.controlledSide, props.initialSize, props.minSize, props.maxSize);
+    });
+    const onPointerDown = (evt) => {
+        if (!elementRef.current) {
+            return;
+        }
+        elementRef.current.setPointerCapture(evt.pointerId);
+        isCaptured = true;
+        splitContext.beginDrag();
+        if (splitContext.direction === SplitDirection.Horizontal) {
+            startValue = evt.clientX;
+        }
+        else {
+            startValue = evt.clientY;
+        }
+        evt.preventDefault();
+    };
+    const onPointerMove = (evt) => {
+        if (!elementRef.current || !isCaptured) {
+            return;
+        }
+        if (splitContext.direction === SplitDirection.Horizontal) {
+            splitContext.drag(evt.clientX - startValue, elementRef.current, props.controlledSide);
+        }
+        else {
+            splitContext.drag(evt.clientY - startValue, elementRef.current, props.controlledSide);
+        }
+        evt.preventDefault();
+    };
+    const onPointerUp = (evt) => {
+        if (!elementRef.current) {
+            return;
+        }
+        elementRef.current.releasePointerCapture(evt.pointerId);
+        isCaptured = false;
+        splitContext.endDrag();
+        evt.preventDefault();
+    };
+    return (_jsx("div", { id: props.id, className: styles["splitter"], ref: elementRef, onPointerDown: (evt) => onPointerDown(evt), onPointerUp: (evt) => onPointerUp(evt), onPointerMove: (evt) => onPointerMove(evt) }));
+};
+//# sourceMappingURL=splitter.js.map

package/split/splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/split/splitter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useRef } from \"react\";\r\nimport styles from \"./splitContainer.module.scss\";\r\nimport type { ControlledSize } from \"./splitContext\";\r\nimport { SplitContext, SplitDirection } from \"./splitContext\";\r\n\r\n/**\r\n * Splitter component properties\r\n */\r\nexport interface ISplitterProps {\r\n    /**\r\n     * Unique identifier\r\n     */\r\n    id?: string;\r\n\r\n    /**\r\n     * Splitter size\r\n     */\r\n    size: number;\r\n\r\n    /**\r\n     * Minimum size for the controlled element\r\n     */\r\n    minSize?: number;\r\n\r\n    /**\r\n     * Maximum size for the controlled element\r\n     */\r\n    maxSize?: number;\r\n\r\n    /**\r\n     * Initial size for the controlled element\r\n     */\r\n    initialSize?: number;\r\n\r\n    /**\r\n     * Defines the controlled side\r\n     */\r\n    controlledSide: ControlledSize;\r\n\r\n    /**\r\n     * refObject to the splitter element\r\n     */\r\n    refObject?: React.RefObject<HTMLDivElement>;\r\n}\r\n\r\n/**\r\n * Creates a splitter component\r\n * @param props defines the splitter properties\r\n * @returns the splitter component\r\n */\r\nexport const Splitter: React.FC<ISplitterProps> = (props) => {\r\n    const elementRef: React.RefObject<HTMLDivElement> = props.refObject || useRef(null);\r\n    const splitContext = useContext(SplitContext);\r\n    let isCaptured = false;\r\n    let startValue: number;\r\n\r\n    useEffect(() => {\r\n        if (!elementRef.current) {\r\n            return;\r\n        }\r\n\r\n        if (splitContext.direction === SplitDirection.Horizontal) {\r\n            elementRef.current.style.width = `${props.size}px`;\r\n            elementRef.current.style.height = `100%`;\r\n            elementRef.current.classList.add(styles[\"horizontal\"]);\r\n        } else {\r\n            elementRef.current.style.height = `${props.size}px`;\r\n            elementRef.current.style.width = `100%`;\r\n            elementRef.current.classList.add(styles[\"vertical\"]);\r\n        }\r\n\r\n        splitContext.sync(elementRef.current, props.controlledSide, props.initialSize, props.minSize, props.maxSize);\r\n    });\r\n\r\n    const onPointerDown = (evt: React.PointerEvent) => {\r\n        if (!elementRef.current) {\r\n            return;\r\n        }\r\n        elementRef.current.setPointerCapture(evt.pointerId);\r\n        isCaptured = true;\r\n        splitContext.beginDrag();\r\n\r\n        if (splitContext.direction === SplitDirection.Horizontal) {\r\n            startValue = evt.clientX;\r\n        } else {\r\n            startValue = evt.clientY;\r\n        }\r\n        evt.preventDefault();\r\n    };\r\n    const onPointerMove = (evt: React.PointerEvent) => {\r\n        if (!elementRef.current || !isCaptured) {\r\n            return;\r\n        }\r\n        if (splitContext.direction === SplitDirection.Horizontal) {\r\n            splitContext.drag(evt.clientX - startValue, elementRef.current, props.controlledSide);\r\n        } else {\r\n            splitContext.drag(evt.clientY - startValue, elementRef.current, props.controlledSide);\r\n        }\r\n        evt.preventDefault();\r\n    };\r\n    const onPointerUp = (evt: React.PointerEvent) => {\r\n        if (!elementRef.current) {\r\n            return;\r\n        }\r\n        elementRef.current.releasePointerCapture(evt.pointerId);\r\n        isCaptured = false;\r\n        splitContext.endDrag();\r\n        evt.preventDefault();\r\n    };\r\n\r\n    return (\r\n        <div\r\n            id={props.id}\r\n            className={styles[\"splitter\"]}\r\n            ref={elementRef}\r\n            onPointerDown={(evt) => onPointerDown(evt)}\r\n            onPointerUp={(evt) => onPointerUp(evt)}\r\n            onPointerMove={(evt) => onPointerMove(evt)}\r\n        ></div>\r\n    );\r\n};\r\n"]}

package/styleHelper.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copy all styles from a document to another document or shadow root
+ * @param source document to copy styles from
+ * @param target document or shadow root to copy styles to
+ */
+export declare function CopyStyles(source: Document, target: Document): void;

package/styleHelper.js

@@ -0,0 +1,21 @@
+/**
+ * Copy all styles from a document to another document or shadow root
+ * @param source document to copy styles from
+ * @param target document or shadow root to copy styles to
+ */
+export function CopyStyles(source, target) {
+    // Copy all <style> elements
+    Array.from(source.querySelectorAll("style")).forEach((style) => {
+        const newStyle = target.createElement("style");
+        newStyle.textContent = style.textContent;
+        target.head.appendChild(newStyle);
+    });
+    // Copy all <link> elements for stylesheets
+    Array.from(source.querySelectorAll('link[rel="stylesheet"]')).forEach((link) => {
+        const newLink = target.createElement("link");
+        newLink.rel = "stylesheet";
+        newLink.href = link.href;
+        target.head.appendChild(newLink);
+    });
+}
+//# sourceMappingURL=styleHelper.js.map

package/styleHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleHelper.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/styleHelper.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAgB,EAAE,MAAgB;IACzD,4BAA4B;IAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QAC3D,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC/C,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;QACzC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,2CAA2C;IAC3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC3E,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7C,OAAO,CAAC,GAAG,GAAG,YAAY,CAAC;QAC3B,OAAO,CAAC,IAAI,GAAI,IAAwB,CAAC,IAAI,CAAC;QAC9C,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["/**\r\n * Copy all styles from a document to another document or shadow root\r\n * @param source document to copy styles from\r\n * @param target document or shadow root to copy styles to\r\n */\r\nexport function CopyStyles(source: Document, target: Document) {\r\n    // Copy all <style> elements\r\n    Array.from(source.querySelectorAll(\"style\")).forEach((style) => {\r\n        const newStyle = target.createElement(\"style\");\r\n        newStyle.textContent = style.textContent;\r\n        target.head.appendChild(newStyle);\r\n    });\r\n\r\n    // Copy all <link> elements for stylesheets\r\n    Array.from(source.querySelectorAll('link[rel=\"stylesheet\"]')).forEach((link) => {\r\n        const newLink = target.createElement(\"link\");\r\n        newLink.rel = \"stylesheet\";\r\n        newLink.href = (link as HTMLLinkElement).href;\r\n        target.head.appendChild(newLink);\r\n    });\r\n}\r\n"]}