@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/components/layout/types.d.ts

@@ -0,0 +1,78 @@
+import type { ComponentType } from "react";
+export declare type LayoutTab = {
+    /**
+     * Tab id
+     */
+    id: string;
+    /**
+     * React component rendered by tab
+     */
+    component: ComponentType;
+};
+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":"AA4EA,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 { ComponentType } 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: ComponentType;\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 {};

package/components/lines/ColorLineComponent.js

@@ -1,146 +1,146 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import { NumericInputComponent } from "./NumericInputComponent.js";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { ColorPickerLineComponent } from "./ColorPickerLineComponent.js";
-import style from "./ColorLineComponent.modules.scss";
-import copyIcon from "../../imgs/copy.svg";
-import { JoinClassNames } from "../classNames.js";
-const emptyColor = new Color4(0, 0, 0, 0);
-export class ColorLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { isExpanded: false, color: this.getValue() };
-        const target = this.props.target;
-        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        const stateColor = nextState.color;
-        const propsColor = this.getValue(nextProps);
-        if (stateColor !== this.state.color) {
-            nextState.color = stateColor;
-            return true;
-        }
-        if (propsColor !== this.state.color) {
-            nextState.color = propsColor;
-            return true;
-        }
-        if (nextState.isExpanded !== this.state.isExpanded) {
-            return true;
-        }
-        return false;
-    }
-    getValue(props = this.props) {
-        const target = props.target;
-        const property = target[props.propertyName];
-        if (!property)
-            return emptyColor;
-        if (typeof property === "string") {
-            // if (property === conflictingValuesPlaceholder) {
-            //     return emptyColor;
-            // }
-            return this._convertToColor(property);
-        }
-        else {
-            if (props.isLinear) {
-                return property.toGammaSpace();
-            }
-            return property.clone();
-        }
-    }
-    setColorFromString(colorString) {
-        const color = this._convertToColor(colorString);
-        this.setColor(color);
-    }
-    setColor(newColor) {
-        this.setState({ color: newColor.clone() });
-        if (this.props.isLinear) {
-            newColor.toLinearSpaceToRef(newColor);
-        }
-        // whether to set properties to color3 or color4
-        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;
-        const target = this.props.target;
-        const initialValue = target[this.props.propertyName];
-        const value = typeof target[this.props.propertyName] === "string" ? setColor.toHexString() : setColor;
-        // make the change
-        target[this.props.propertyName] = value;
-        // notify observers
-        if (this.props.onPropertyChangedObservable) {
-            this.props.onPropertyChangedObservable.notifyObservers({
-                object: target,
-                property: this.props.propertyName,
-                value,
-                initialValue,
-            });
-        }
-        if (this.props.onChange) {
-            this.props.onChange();
-        }
-    }
-    switchExpandState() {
-        this.setState({ isExpanded: !this.state.isExpanded });
-    }
-    updateStateR(value) {
-        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));
-    }
-    updateStateG(value) {
-        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));
-    }
-    updateStateB(value) {
-        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));
-    }
-    updateStateA(value) {
-        if (this.props.disableAlpha) {
-            return;
-        }
-        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));
-    }
-    copyToClipboard() {
-        const element = document.createElement("div");
-        element.textContent = this.state.color.toHexString();
-        document.body.appendChild(element);
-        if (window.getSelection) {
-            const range = document.createRange();
-            range.selectNode(element);
-            window.getSelection().removeAllRanges();
-            window.getSelection().addRange(range);
-        }
-        document.execCommand("copy");
-        element.remove();
-    }
-    _convertToColor(color) {
-        if (color === "" || color === "transparent") {
-            return emptyColor;
-        }
-        if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
-            const d = document.createElement("div");
-            d.style.color = color;
-            document.body.append(d);
-            const rgb = window.getComputedStyle(d).color;
-            document.body.removeChild(d);
-            const rgbArray = rgb
-                .substring(4, rgb.length - 1)
-                .replace(/ /g, "")
-                .split(",");
-            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;
-            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);
-        }
-        if (this.props.disableAlpha) {
-            const color3 = Color3.FromHexString(color);
-            return new Color4(color3.r, color3.g, color3.b, 1.0);
-        }
-        return Color4.FromHexString(color);
-    }
-    _toColor3(color) {
-        return new Color3(color.r, color.g, color.b);
-    }
-    render() {
-        const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
-        return (_jsxs("div", { className: style.color3Line, children: [_jsxs("div", { className: style.firstLine, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: style.label, title: this.props.label, children: this.props.label }), _jsx("div", { className: style.color3, children: _jsx(ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
-                                    this.setColorFromString(colorString);
-                                } }) }), _jsx("div", { className: JoinClassNames(style, "copy", "hoverIcon"), onClick: () => this.copyToClipboard(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), _jsx("div", { className: JoinClassNames("expand", "hoverIcon"), onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && (_jsxs("div", { className: style.secondLine, children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import { NumericInputComponent } from "./NumericInputComponent.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { ColorPickerLineComponent } from "./ColorPickerLineComponent.js";
+import style from "./ColorLineComponent.modules.scss";
+import copyIcon from "../../imgs/copy.svg";
+import { JoinClassNames } from "../classNames.js";
+const emptyColor = new Color4(0, 0, 0, 0);
+export class ColorLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { isExpanded: false, color: this.getValue() };
+        const target = this.props.target;
+        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const stateColor = nextState.color;
+        const propsColor = this.getValue(nextProps);
+        if (stateColor !== this.state.color) {
+            nextState.color = stateColor;
+            return true;
+        }
+        if (propsColor !== this.state.color) {
+            nextState.color = propsColor;
+            return true;
+        }
+        if (nextState.isExpanded !== this.state.isExpanded) {
+            return true;
+        }
+        return false;
+    }
+    getValue(props = this.props) {
+        const target = props.target;
+        const property = target[props.propertyName];
+        if (!property)
+            return emptyColor;
+        if (typeof property === "string") {
+            // if (property === conflictingValuesPlaceholder) {
+            //     return emptyColor;
+            // }
+            return this._convertToColor(property);
+        }
+        else {
+            if (props.isLinear) {
+                return property.toGammaSpace();
+            }
+            return property.clone();
+        }
+    }
+    setColorFromString(colorString) {
+        const color = this._convertToColor(colorString);
+        this.setColor(color);
+    }
+    setColor(newColor) {
+        this.setState({ color: newColor.clone() });
+        if (this.props.isLinear) {
+            newColor.toLinearSpaceToRef(newColor);
+        }
+        // whether to set properties to color3 or color4
+        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;
+        const target = this.props.target;
+        const initialValue = target[this.props.propertyName];
+        const value = typeof target[this.props.propertyName] === "string" ? setColor.toHexString() : setColor;
+        // make the change
+        target[this.props.propertyName] = value;
+        // notify observers
+        if (this.props.onPropertyChangedObservable) {
+            this.props.onPropertyChangedObservable.notifyObservers({
+                object: target,
+                property: this.props.propertyName,
+                value,
+                initialValue,
+            });
+        }
+        if (this.props.onChange) {
+            this.props.onChange();
+        }
+    }
+    switchExpandState() {
+        this.setState({ isExpanded: !this.state.isExpanded });
+    }
+    updateStateR(value) {
+        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));
+    }
+    updateStateG(value) {
+        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));
+    }
+    updateStateB(value) {
+        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));
+    }
+    updateStateA(value) {
+        if (this.props.disableAlpha) {
+            return;
+        }
+        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));
+    }
+    copyToClipboard() {
+        const element = document.createElement("div");
+        element.textContent = this.state.color.toHexString();
+        document.body.appendChild(element);
+        if (window.getSelection) {
+            const range = document.createRange();
+            range.selectNode(element);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+        }
+        document.execCommand("copy");
+        element.remove();
+    }
+    _convertToColor(color) {
+        if (color === "" || color === "transparent") {
+            return emptyColor;
+        }
+        if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
+            const d = document.createElement("div");
+            d.style.color = color;
+            document.body.append(d);
+            const rgb = window.getComputedStyle(d).color;
+            document.body.removeChild(d);
+            const rgbArray = rgb
+                .substring(4, rgb.length - 1)
+                .replace(/ /g, "")
+                .split(",");
+            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;
+            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);
+        }
+        if (this.props.disableAlpha) {
+            const color3 = Color3.FromHexString(color);
+            return new Color4(color3.r, color3.g, color3.b, 1.0);
+        }
+        return Color4.FromHexString(color);
+    }
+    _toColor3(color) {
+        return new Color3(color.r, color.g, color.b);
+    }
+    render() {
+        const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
+        return (_jsxs("div", { className: style.color3Line, children: [_jsxs("div", { className: style.firstLine, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: style.label, title: this.props.label, children: this.props.label }), _jsx("div", { className: style.color3, children: _jsx(ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
+                                    this.setColorFromString(colorString);
+                                } }) }), _jsx("div", { className: JoinClassNames(style, "copy", "hoverIcon"), onClick: () => this.copyToClipboard(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), _jsx("div", { className: JoinClassNames("expand", "hoverIcon"), onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && (_jsxs("div", { className: style.secondLine, children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
+    }
+}
 //# sourceMappingURL=ColorLineComponent.js.map

package/components/lines/ColorPickerLineComponent.d.ts

@@ -1,33 +1,33 @@
-import * as React from "react";
-import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-export interface IColorPickerComponentProps {
-    value: Color4 | Color3;
-    linearHint?: boolean;
-    onColorChanged: (newOne: string) => void;
-    icon?: string;
-    iconLabel?: string;
-    shouldPopRight?: boolean;
-    lockObject?: LockObject;
-    backgroundColor?: string;
-}
-interface IColorPickerComponentState {
-    pickerEnabled: boolean;
-    color: Color3 | Color4;
-    hex: string;
-}
-export declare class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
-    private _floatRef;
-    private _floatHostRef;
-    private _coverRef;
-    constructor(props: IColorPickerComponentProps);
-    syncPositions(): void;
-    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
-    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
-        children?: React.ReactNode;
-    }>): string;
-    componentDidUpdate(): void;
-    componentDidMount(): void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+export interface IColorPickerComponentProps {
+    value: Color4 | Color3;
+    linearHint?: boolean;
+    onColorChanged: (newOne: string) => void;
+    icon?: string;
+    iconLabel?: string;
+    shouldPopRight?: boolean;
+    lockObject?: LockObject;
+    backgroundColor?: string;
+}
+interface IColorPickerComponentState {
+    pickerEnabled: boolean;
+    color: Color3 | Color4;
+    hex: string;
+}
+export declare class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+    private _floatRef;
+    private _floatHostRef;
+    private _coverRef;
+    constructor(props: IColorPickerComponentProps);
+    syncPositions(): void;
+    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): string;
+    componentDidUpdate(): void;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};