@babylonjs/shared-ui-components 5.28.0 → 5.30.0

package/components/layout/FlexibleTabsContainer.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FlexibleTab } from "./FlexibleTab.js";
+import { LayoutContext } from "./LayoutContext.js";
+import style from "./FlexibleTabsContainer.modules.scss";
+import dragIcon from "../../imgs/dragDotsIcon_white.svg";
+import { getPosInLayout, removeLayoutRowAndRedistributePercentages } from "./utils.js";
+import { DraggableIcon } from "./DraggableIcon.js";
+import { ElementTypes } from "./types.js";
+/**
+ * This component contains a set of tabs of which only one is visible at a time.
+ * The tabs can also be dragged from and to different containers.
+ */
+export const FlexibleTabsContainer = (props) => {
+    const { layout, setLayout } = useContext(LayoutContext);
+    const { tabs, selectedTab } = props;
+    const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;
+    const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);
+    const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;
+    const selectTab = (tabId) => {
+        const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex);
+        layoutPos.selectedTab = tabId;
+        setLayout({ ...layout });
+    };
+    const addTabAfter = (droppedTabItem, dropZoneTabId) => {
+        // Get layout element corresponding to dropped tabs
+        const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);
+        // Get layout element corresponding to dropzone
+        const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex);
+        for (const { id } of droppedTabItem.tabs) {
+            const droppedTabIndex = layoutDropped.tabs.findIndex((tab) => tab.id === id);
+            const droppedTab = layoutDropped.tabs[droppedTabIndex];
+            // Add dropped tab after dropZoneTabId
+            const dropZoneIndex = layoutDropZone.tabs.findIndex((tab) => tab.id === dropZoneTabId);
+            layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);
+            // Remove dropped tab from its original position
+            layoutDropped.tabs.splice(droppedTabIndex, 1);
+        }
+        if (layoutDropped.tabs.length === 0) {
+            // Check if the layout that was dropped from is empty now
+            removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);
+        }
+        else if (droppedTabItem.tabs.map((tab) => tab.id).includes(layoutDropped.selectedTab)) {
+            //Check if the layout that was dropped from's active tab is still in the layout
+            layoutDropped.selectedTab = layoutDropped.tabs[0].id;
+        }
+        // Update layout
+        setLayout({ ...layout });
+    };
+    return (_jsxs("div", { className: style.rootContainer, children: [_jsxs("div", { draggable: false, className: style.tabsLineContainer, children: [_jsx("div", { className: style.tabsContainer, children: tabs.map((tab) => {
+                            return (_jsx(FlexibleTab, { title: tab.title, selected: tab.id === selectedTab, onClick: () => selectTab(tab.id), item: { rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }, onTabDroppedAction: (item) => addTabAfter(item, tab.id) }, tab.id));
+                        }) }), _jsx(DraggableIcon, { src: dragIcon, item: { rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }, type: ElementTypes.TAB_GROUP })] }), _jsx("div", { className: style.contentContainer, children: selectedTabObject === null || selectedTabObject === void 0 ? void 0 : selectedTabObject.component })] }));
+};
+//# sourceMappingURL=FlexibleTabsContainer.js.map

package/components/layout/FlexibleTabsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexibleTabsContainer.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { FlexibleTab } from \"./FlexibleTab\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport style from \"./FlexibleTabsContainer.modules.scss\";\r\n\r\nimport dragIcon from \"../../imgs/dragDotsIcon_white.svg\";\r\nimport { getPosInLayout, removeLayoutRowAndRedistributePercentages } from \"./utils\";\r\nimport { DraggableIcon } from \"./DraggableIcon\";\r\nimport type { LayoutTab, LayoutTabsRow, TabDrag } from \"./types\";\r\nimport { ElementTypes } from \"./types\";\r\n\r\n/**\r\n * Arguments for the TabsContainer component.\r\n */\r\nexport interface IFlexibleTabsContainerProps {\r\n    /**\r\n     * The tabs to display\r\n     */\r\n    tabs: LayoutTab[];\r\n    /**\r\n     * Row index of component in layout\r\n     */\r\n    rowIndex: number;\r\n    /**\r\n     * Column index of component in layout\r\n     */\r\n    columnIndex: number;\r\n    /**\r\n     * Which tab is selected in the layout\r\n     */\r\n    selectedTab?: string;\r\n}\r\n\r\n/**\r\n * This component contains a set of tabs of which only one is visible at a time.\r\n * The tabs can also be dragged from and to different containers.\r\n */\r\nexport const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps> = (props) => {\r\n    const { layout, setLayout } = useContext(LayoutContext);\r\n    const { tabs, selectedTab } = props;\r\n    const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;\r\n    const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);\r\n    const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;\r\n\r\n    const selectTab = (tabId: string) => {\r\n        const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n        layoutPos.selectedTab = tabId;\r\n        setLayout({ ...layout });\r\n    };\r\n\r\n    const addTabAfter = (droppedTabItem: TabDrag, dropZoneTabId: string) => {\r\n        // Get layout element corresponding to dropped tabs\r\n        const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber) as LayoutTabsRow;\r\n        // Get layout element corresponding to dropzone\r\n        const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n\r\n        for (const { id } of droppedTabItem.tabs) {\r\n            const droppedTabIndex = layoutDropped.tabs.findIndex((tab: any) => tab.id === id);\r\n            const droppedTab = layoutDropped.tabs[droppedTabIndex];\r\n            // Add dropped tab after dropZoneTabId\r\n            const dropZoneIndex = layoutDropZone.tabs.findIndex((tab: any) => tab.id === dropZoneTabId);\r\n            layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);\r\n            // Remove dropped tab from its original position\r\n            layoutDropped.tabs.splice(droppedTabIndex, 1);\r\n        }\r\n\r\n        if (layoutDropped.tabs.length === 0) {\r\n            // Check if the layout that was dropped from is empty now\r\n            removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);\r\n        } else if (droppedTabItem.tabs.map((tab: any) => tab.id).includes(layoutDropped.selectedTab)) {\r\n            //Check if the layout that was dropped from's active tab is still in the layout\r\n            layoutDropped.selectedTab = layoutDropped.tabs[0].id;\r\n        }\r\n\r\n        // Update layout\r\n        setLayout({ ...layout });\r\n    };\r\n\r\n    return (\r\n        <div className={style.rootContainer}>\r\n            <div draggable={false} className={style.tabsLineContainer}>\r\n                <div className={style.tabsContainer}>\r\n                    {tabs.map((tab) => {\r\n                        return (\r\n                            <FlexibleTab\r\n                                key={tab.id}\r\n                                title={tab.title}\r\n                                selected={tab.id === selectedTab}\r\n                                onClick={() => selectTab(tab.id)}\r\n                                item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }}\r\n                                onTabDroppedAction={(item) => addTabAfter(item, tab.id)}\r\n                            />\r\n                        );\r\n                    })}\r\n                </div>\r\n                <DraggableIcon\r\n                    src={dragIcon}\r\n                    item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }}\r\n                    type={ElementTypes.TAB_GROUP}\r\n                />\r\n            </div>\r\n            <div className={style.contentContainer}>{selectedTabObject?.component}</div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/LayoutContext.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { Layout } from "./types";
+export declare const LayoutContext: import("react").Context<{
+    /**
+     * The layout object
+     */
+    layout: Layout;
+    /**
+     * Function to set the layout object in the context
+     */
+    setLayout: (layout: Layout) => void;
+}>;

package/components/layout/LayoutContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+export const LayoutContext = createContext({ layout: {}, setLayout: () => { } });
+//# sourceMappingURL=LayoutContext.js.map

package/components/layout/LayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutContext.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/LayoutContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CASvC,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\r\nimport type { Layout } from \"./types\";\r\n\r\nexport const LayoutContext = createContext<{\r\n    /**\r\n     * The layout object\r\n     */\r\n    layout: Layout;\r\n    /**\r\n     * Function to set the layout object in the context\r\n     */\r\n    setLayout: (layout: Layout) => void;\r\n}>({ layout: {}, setLayout: () => {} });\r\n"]}

package/components/layout/types.d.ts

@@ -0,0 +1,82 @@
+import type { ReactElement } from "react";
+export declare type LayoutTab = {
+    /**
+     * Tab id
+     */
+    id: string;
+    /**
+     * React component rendered by tab
+     */
+    component: ReactElement;
+    /**
+     * Tab title
+     */
+    title: string;
+};
+export declare type LayoutTabsRow = {
+    /**
+     * row id
+     */
+    id: string;
+    /**
+     * row height in its containing column
+     */
+    height: string;
+    /**
+     * selected tab in row
+     */
+    selectedTab: string;
+    /**
+     * list of tabs contained in row
+     */
+    tabs: LayoutTab[];
+};
+export declare type LayoutColumn = {
+    /**
+     * column id
+     */
+    id: string;
+    /**
+     * column width in the grid
+     */
+    width: string;
+    /**
+     * column rows
+     */
+    rows: LayoutTabsRow[];
+};
+export declare type Layout = {
+    /**
+     * layout columns
+     */
+    columns?: LayoutColumn[];
+};
+export declare type TabDrag = {
+    /**
+     * row number of the tab being dragged
+     */
+    rowNumber: number;
+    /**
+     * column number of the tab being dragged
+     */
+    columnNumber: number;
+    /**
+     * the tabs being dragged
+     */
+    tabs: {
+        /**
+         * id of tab being dragged
+         */
+        id: string;
+    }[];
+};
+export declare enum ElementTypes {
+    RESIZE_BAR = "0",
+    TAB = "1",
+    TAB_GROUP = "2",
+    NONE = "2"
+}
+export declare enum ResizeDirections {
+    ROW = "row",
+    COLUMN = "column"
+}

package/components/layout/types.js

@@ -0,0 +1,13 @@
+export var ElementTypes;
+(function (ElementTypes) {
+    ElementTypes["RESIZE_BAR"] = "0";
+    ElementTypes["TAB"] = "1";
+    ElementTypes["TAB_GROUP"] = "2";
+    ElementTypes["NONE"] = "2";
+})(ElementTypes || (ElementTypes = {}));
+export var ResizeDirections;
+(function (ResizeDirections) {
+    ResizeDirections["ROW"] = "row";
+    ResizeDirections["COLUMN"] = "column";
+})(ResizeDirections || (ResizeDirections = {}));
+//# sourceMappingURL=types.js.map

package/components/layout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/types.ts"],"names":[],"mappings":"AAgFA,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACpB,gCAAgB,CAAA;IAChB,yBAAS,CAAA;IACT,+BAAe,CAAA;IACf,0BAAU,CAAA;AACd,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+BAAW,CAAA;IACX,qCAAiB,CAAA;AACrB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["import type { ReactElement } from \"react\";\r\n\r\n// Define layout typing\r\n\r\nexport type LayoutTab = {\r\n    /**\r\n     * Tab id\r\n     */\r\n    id: string;\r\n    /**\r\n     * React component rendered by tab\r\n     */\r\n    component: ReactElement;\r\n    /**\r\n     * Tab title\r\n     */\r\n    title: string;\r\n};\r\n\r\nexport type LayoutTabsRow = {\r\n    /**\r\n     * row id\r\n     */\r\n    id: string;\r\n    /**\r\n     * row height in its containing column\r\n     */\r\n    height: string;\r\n    /**\r\n     * selected tab in row\r\n     */\r\n    selectedTab: string;\r\n    /**\r\n     * list of tabs contained in row\r\n     */\r\n    tabs: LayoutTab[];\r\n};\r\n\r\nexport type LayoutColumn = {\r\n    /**\r\n     * column id\r\n     */\r\n    id: string;\r\n    /**\r\n     * column width in the grid\r\n     */\r\n    width: string;\r\n    /**\r\n     * column rows\r\n     */\r\n    rows: LayoutTabsRow[];\r\n};\r\n\r\nexport type Layout = {\r\n    /**\r\n     * layout columns\r\n     */\r\n    columns?: LayoutColumn[];\r\n};\r\n\r\nexport type TabDrag = {\r\n    /**\r\n     * row number of the tab being dragged\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * column number of the tab being dragged\r\n     */\r\n    columnNumber: number;\r\n    /**\r\n     * the tabs being dragged\r\n     */\r\n    tabs: {\r\n        /**\r\n         * id of tab being dragged\r\n         */\r\n        id: string;\r\n    }[];\r\n};\r\n\r\nexport enum ElementTypes {\r\n    RESIZE_BAR = \"0\",\r\n    TAB = \"1\",\r\n    TAB_GROUP = \"2\",\r\n    NONE = \"2\",\r\n}\r\n\r\nexport enum ResizeDirections {\r\n    ROW = \"row\",\r\n    COLUMN = \"column\",\r\n}\r\n"]}

package/components/layout/utils.d.ts

@@ -0,0 +1,25 @@
+import type { Layout } from "./types";
+/**
+ * Given a column and row number in the layout, return the corresponding column/row
+ * @param layout
+ * @param column
+ * @param row
+ * @returns
+ */
+export declare const getPosInLayout: (layout: Layout, column: number, row?: number | undefined) => import("./types").LayoutTabsRow | import("./types").LayoutColumn;
+/**
+ * Remove a row in position row, column from the layout, and redistribute heights of remaining rows
+ * @param layout
+ * @param column
+ * @param row
+ */
+export declare const removeLayoutRowAndRedistributePercentages: (layout: Layout, column: number, row: number) => void;
+/**
+ * Add a percentage string to a number
+ */
+export declare const addPercentageStringToNumber: (p1: string, p2: number) => number;
+/**
+ * Parses a percentage string into a number
+ * @param p the percentage string
+ */
+export declare const parsePercentage: (p: string) => number;

package/components/layout/utils.js

@@ -0,0 +1,68 @@
+/**
+ * Given a column and row number in the layout, return the corresponding column/row
+ * @param layout
+ * @param column
+ * @param row
+ * @returns
+ */
+export const getPosInLayout = (layout, column, row) => {
+    if (!layout.columns) {
+        throw new Error("Attempted to get position on empty layout");
+    }
+    const columnLayout = layout.columns[column];
+    if (!columnLayout) {
+        throw new Error("Attempted to get an invalid layout column");
+    }
+    if (row === undefined) {
+        return columnLayout;
+    }
+    return columnLayout.rows[row];
+};
+/**
+ * Remove a row in position row, column from the layout, and redistribute heights of remaining rows
+ * @param layout
+ * @param column
+ * @param row
+ */
+export const removeLayoutRowAndRedistributePercentages = (layout, column, row) => {
+    if (!layout.columns) {
+        throw new Error("Attempted to get position on empty layout");
+    }
+    const columnLayout = layout.columns[column];
+    if (!columnLayout) {
+        throw new Error("Attempted to get an invalid layout column");
+    }
+    const rowLayout = columnLayout.rows[row];
+    if (!rowLayout) {
+        throw new Error("Attempted to get an invalid layout row");
+    }
+    const rowHeight = rowLayout.height;
+    if (rowHeight === undefined) {
+        throw new Error("Attempted to remove a row with no height");
+    }
+    // Remove row from layout
+    columnLayout.rows.splice(row, 1);
+    // Redistribute this row's height to the remaining rows
+    const percToAdd = parsePercentage(rowHeight) / columnLayout.rows.length;
+    columnLayout.rows.forEach((row) => {
+        row.height = addPercentageStringToNumber(row.height, percToAdd) + "%";
+    });
+};
+/**
+ * Add a percentage string to a number
+ */
+export const addPercentageStringToNumber = (p1, p2) => {
+    // Convert both values to numbers
+    const np1 = Number.parseFloat(p1.replace("%", ""));
+    const np2 = p2;
+    const nr = np1 + np2;
+    return nr;
+};
+/**
+ * Parses a percentage string into a number
+ * @param p the percentage string
+ */
+export const parsePercentage = (p) => {
+    return Number.parseFloat(p.replace("%", ""));
+};
+//# sourceMappingURL=utils.js.map

package/components/layout/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAY,EAAE,EAAE;IAC3E,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;QACjB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE;QACf,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,IAAI,GAAG,KAAK,SAAS,EAAE;QACnB,OAAO,YAAY,CAAC;KACvB;IACD,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAW,EAAE,EAAE;IACrG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;QACjB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE;QACf,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;KAC7D;IACD,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,IAAI,SAAS,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;KAC/D;IACD,yBAAyB;IACzB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEjC,uDAAuD;IACvD,MAAM,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;IACxE,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACnC,GAAG,CAAC,MAAM,GAAG,2BAA2B,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,GAAG,CAAC;IAC1E,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAU,EAAE,EAAU,EAAU,EAAE;IAC1E,iCAAiC;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,EAAE,CAAC;IAEf,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IACrB,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAS,EAAU,EAAE;IACjD,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;AACjD,CAAC,CAAC","sourcesContent":["import type { Layout } from \"./types\";\r\n\r\n/**\r\n * Given a column and row number in the layout, return the corresponding column/row\r\n * @param layout\r\n * @param column\r\n * @param row\r\n * @returns\r\n */\r\nexport const getPosInLayout = (layout: Layout, column: number, row?: number) => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    if (row === undefined) {\r\n        return columnLayout;\r\n    }\r\n    return columnLayout.rows[row];\r\n};\r\n\r\n/**\r\n * Remove a row in position row, column from the layout, and redistribute heights of remaining rows\r\n * @param layout\r\n * @param column\r\n * @param row\r\n */\r\nexport const removeLayoutRowAndRedistributePercentages = (layout: Layout, column: number, row: number) => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    const rowLayout = columnLayout.rows[row];\r\n    if (!rowLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout row\");\r\n    }\r\n    const rowHeight = rowLayout.height;\r\n    if (rowHeight === undefined) {\r\n        throw new Error(\"Attempted to remove a row with no height\");\r\n    }\r\n    // Remove row from layout\r\n    columnLayout.rows.splice(row, 1);\r\n\r\n    // Redistribute this row's height to the remaining rows\r\n    const percToAdd = parsePercentage(rowHeight) / columnLayout.rows.length;\r\n    columnLayout.rows.forEach((row: any) => {\r\n        row.height = addPercentageStringToNumber(row.height, percToAdd) + \"%\";\r\n    });\r\n};\r\n\r\n/**\r\n * Add a percentage string to a number\r\n */\r\nexport const addPercentageStringToNumber = (p1: string, p2: number): number => {\r\n    // Convert both values to numbers\r\n    const np1 = Number.parseFloat(p1.replace(\"%\", \"\"));\r\n    const np2 = p2;\r\n\r\n    const nr = np1 + np2;\r\n    return nr;\r\n};\r\n\r\n/**\r\n * Parses a percentage string into a number\r\n * @param p the percentage string\r\n */\r\nexport const parsePercentage = (p: string): number => {\r\n    return Number.parseFloat(p.replace(\"%\", \"\"));\r\n};\r\n"]}

package/components/lines/ColorLineComponent.d.ts

@@ -1,40 +1,40 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { PropertyChangedEvent } from "../../propertyChangedEvent";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-export interface IColorLineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    onPropertyChangedObservable: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    isLinear?: boolean;
-    icon?: string;
-    iconLabel?: string;
-    disableAlpha?: boolean;
-    lockObject: LockObject;
-}
-interface IColorLineComponentState {
-    isExpanded: boolean;
-    color: Color4;
-}
-export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
-    constructor(props: IColorLineComponentProps);
-    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
-        children?: React.ReactNode;
-    }>): Color4;
-    setColorFromString(colorString: string): void;
-    setColor(newColor: Color4): void;
-    switchExpandState(): void;
-    updateStateR(value: number): void;
-    updateStateG(value: number): void;
-    updateStateB(value: number): void;
-    updateStateA(value: number): void;
-    copyToClipboard(): void;
-    private _convertToColor;
-    private _toColor3;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Color4 } from "@babylonjs/core/Maths/math.color.js";
+import type { PropertyChangedEvent } from "../../propertyChangedEvent";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+export interface IColorLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    onPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    disableAlpha?: boolean;
+    lockObject: LockObject;
+}
+interface IColorLineComponentState {
+    isExpanded: boolean;
+    color: Color4;
+}
+export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+    constructor(props: IColorLineComponentProps);
+    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): Color4;
+    setColorFromString(colorString: string): void;
+    setColor(newColor: Color4): void;
+    switchExpandState(): void;
+    updateStateR(value: number): void;
+    updateStateG(value: number): void;
+    updateStateB(value: number): void;
+    updateStateA(value: number): void;
+    copyToClipboard(): void;
+    private _convertToColor;
+    private _toColor3;
+    render(): JSX.Element;
+}
+export {};