@babylonjs/shared-ui-components 8.16.0 → 8.16.1

package/components/lines/ColorLineComponent.js

@@ -1,147 +0,0 @@
-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 * as style from "./ColorLineComponent.module.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", labelTooltip: "Red", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "g", labelTooltip: "Green", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "b", labelTooltip: "Blue", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "a", labelTooltip: "Alpha", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
-    }
-}
-//# sourceMappingURL=ColorLineComponent.js.map

package/components/lines/ColorLineComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/ColorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInputComponent } from \"./NumericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../../propertyChangedEvent\";\r\nimport { ColorPickerLineComponent } from \"./ColorPickerLineComponent\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport * as style from \"./ColorLineComponent.module.scss\";\r\n\r\nimport copyIcon from \"../../imgs/copy.svg\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nconst EmptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    onPropertyChangedObservable: Observable<PropertyChangedEvent>;\r\n    onChange?: () => void;\r\n    isLinear?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    disableAlpha?: boolean;\r\n    lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n    isExpanded: boolean;\r\n    color: Color4;\r\n}\r\n\r\nexport class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {\r\n    constructor(props: IColorLineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n        const target = this.props.target;\r\n        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState) {\r\n        const stateColor = nextState.color;\r\n        const propsColor = this.getValue(nextProps);\r\n        if (stateColor !== this.state.color) {\r\n            nextState.color = stateColor;\r\n            return true;\r\n        }\r\n        if (propsColor !== this.state.color) {\r\n            nextState.color = propsColor;\r\n            return true;\r\n        }\r\n        if (nextState.isExpanded !== this.state.isExpanded) {\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    getValue(props = this.props): Color4 {\r\n        const target = props.target;\r\n        const property = target[props.propertyName];\r\n        if (!property) {\r\n            return EmptyColor;\r\n        }\r\n        if (typeof property === \"string\") {\r\n            // if (property === conflictingValuesPlaceholder) {\r\n            //     return emptyColor;\r\n            // }\r\n            return this._convertToColor(property);\r\n        } else {\r\n            if (props.isLinear) {\r\n                return property.toGammaSpace();\r\n            }\r\n            return property.clone();\r\n        }\r\n    }\r\n\r\n    setColorFromString(colorString: string) {\r\n        const color = this._convertToColor(colorString);\r\n        this.setColor(color);\r\n    }\r\n\r\n    setColor(newColor: Color4) {\r\n        this.setState({ color: newColor.clone() });\r\n        if (this.props.isLinear) {\r\n            newColor.toLinearSpaceToRef(newColor);\r\n        }\r\n        // whether to set properties to color3 or color4\r\n        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n        const target = this.props.target;\r\n        const initialValue = target[this.props.propertyName];\r\n        const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n        // make the change\r\n        target[this.props.propertyName] = value;\r\n        // notify observers\r\n        if (this.props.onPropertyChangedObservable) {\r\n            this.props.onPropertyChangedObservable.notifyObservers({\r\n                object: target,\r\n                property: this.props.propertyName,\r\n                value,\r\n                initialValue,\r\n            });\r\n        }\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange();\r\n        }\r\n    }\r\n\r\n    switchExpandState() {\r\n        this.setState({ isExpanded: !this.state.isExpanded });\r\n    }\r\n\r\n    updateStateR(value: number) {\r\n        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateG(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateB(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n    }\r\n\r\n    updateStateA(value: number) {\r\n        if (this.props.disableAlpha) {\r\n            return;\r\n        }\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n    }\r\n\r\n    copyToClipboard() {\r\n        const element = document.createElement(\"div\");\r\n        element.textContent = this.state.color.toHexString();\r\n        document.body.appendChild(element);\r\n\r\n        if (window.getSelection) {\r\n            const range = document.createRange();\r\n            range.selectNode(element);\r\n            window.getSelection()!.removeAllRanges();\r\n            window.getSelection()!.addRange(range);\r\n        }\r\n\r\n        document.execCommand(\"copy\");\r\n        element.remove();\r\n    }\r\n\r\n    private _convertToColor(color: string): Color4 {\r\n        if (color === \"\" || color === \"transparent\") {\r\n            return EmptyColor;\r\n        }\r\n\r\n        if (color.substring(0, 1) !== \"#\" || (color.length !== 7 && color.length !== 9)) {\r\n            const d = document.createElement(\"div\");\r\n            d.style.color = color;\r\n            document.body.append(d);\r\n            const rgb = window.getComputedStyle(d).color;\r\n            document.body.removeChild(d);\r\n\r\n            const rgbArray = rgb\r\n                .substring(4, rgb.length - 1)\r\n                .replace(/ /g, \"\")\r\n                .split(\",\");\r\n\r\n            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n        }\r\n\r\n        if (this.props.disableAlpha) {\r\n            const color3 = Color3.FromHexString(color);\r\n            return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n        }\r\n\r\n        return Color4.FromHexString(color);\r\n    }\r\n\r\n    private _toColor3(color: Color4) {\r\n        return new Color3(color.r, color.g, color.b);\r\n    }\r\n\r\n    override render() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className={style.color3Line}>\r\n                <div className={style.firstLine}>\r\n                    {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                    <div className={style.label} title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                    <div className={style.color3}>\r\n                        <ColorPickerLineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            linearHint={this.props.isLinear}\r\n                            value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n                            onColorChanged={(colorString) => {\r\n                                this.setColorFromString(colorString);\r\n                            }}\r\n                        />\r\n                    </div>\r\n                    <div className={JoinClassNames(style, \"copy\", \"hoverIcon\")} onClick={() => this.copyToClipboard()} title=\"Copy to clipboard\">\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                    <div className={JoinClassNames(\"expand\", \"hoverIcon\")} onClick={() => this.switchExpandState()} title=\"Expand\">\r\n                        {chevron}\r\n                    </div>\r\n                </div>\r\n                {this.state.isExpanded && (\r\n                    <div className={style.secondLine}>\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"r\"\r\n                            labelTooltip=\"Red\"\r\n                            value={this.state.color.r}\r\n                            onChange={(value) => this.updateStateR(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"g\"\r\n                            labelTooltip=\"Green\"\r\n                            value={this.state.color.g}\r\n                            onChange={(value) => this.updateStateG(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"b\"\r\n                            labelTooltip=\"Blue\"\r\n                            value={this.state.color.b}\r\n                            onChange={(value) => this.updateStateB(value)}\r\n                        />\r\n                        {this.props.disableAlpha || (\r\n                            <NumericInputComponent\r\n                                lockObject={this.props.lockObject}\r\n                                label=\"a\"\r\n                                labelTooltip=\"Alpha\"\r\n                                value={this.state.color.a}\r\n                                onChange={(value) => this.updateStateA(value)}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/components/lines/ColorLineComponent.module.scss

@@ -1,67 +0,0 @@
-.color3Line {
-    display: grid;
-}
-
-.firstLine {
-    display: flex;
-    align-items: center;
-}
-
-.color3 {
-    display: flex;
-    align-items: center;
-
-    input {
-        margin-right: 5px;
-    }
-}
-
-.label {
-    padding-right: 5px;
-}
-
-.floatLine {
-    .value {
-        padding-left: 2px;
-    }
-}
-
-.hoverIcon:hover {
-    opacity: 0.8;
-}
-
-.copy {
-    display: none;
-}
-
-.expand {
-    display: none;
-}
-
-.secondLine {
-    display: grid;
-    padding-right: 5px;
-    border-left: 1px solid rgb(51, 122, 183);
-}
-
-.numeric {
-    display: grid;
-    grid-template-columns: 1fr auto;
-}
-
-.numeric-label {
-    text-align: right;
-    grid-column: 1;
-    display: flex;
-    align-items: center;
-    justify-self: right;
-    margin-right: 10px;
-}
-
-.numeric-value {
-    width: 120px;
-    grid-column: 2;
-    display: flex;
-    align-items: center;
-    border: 1px solid rgb(51, 122, 183);
-}

package/lines/iconButtonLineComponent.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-export interface IIconButtonLineComponentProps {
-    icon: string;
-    onClick: () => void;
-    tooltip: string;
-    active?: boolean;
-}
-export declare class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
-    constructor(props: IIconButtonLineComponentProps);
-    render(): import("react/jsx-runtime").JSX.Element;
-}

package/lines/iconButtonLineComponent.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-export class IconButtonLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        return (_jsx("div", { style: { backgroundColor: this.props.active ? "#111111" : "" }, title: this.props.tooltip, className: `icon ${this.props.icon}`, onClick: () => this.props.onClick() }));
-    }
-}
-//# sourceMappingURL=iconButtonLineComponent.js.map

package/lines/iconButtonLineComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/iconButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,OAAO,uBAAwB,SAAQ,KAAK,CAAC,SAAwC;IACvF,YAAY,KAAoC;QAC5C,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,cACI,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAC9D,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EACzB,SAAS,EAAE,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,GACrC,CACL,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\nexport interface IIconButtonLineComponentProps {\r\n    icon: string;\r\n    onClick: () => void;\r\n    tooltip: string;\r\n    active?: boolean;\r\n}\r\n\r\nexport class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {\r\n    constructor(props: IIconButtonLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div\r\n                style={{ backgroundColor: this.props.active ? \"#111111\" : \"\" }}\r\n                title={this.props.tooltip}\r\n                className={`icon ${this.props.icon}`}\r\n                onClick={() => this.props.onClick()}\r\n            />\r\n        );\r\n    }\r\n}\r\n"]}