@babylonjs/shared-ui-components 5.28.0

package/lines/buttonLineComponent.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class ButtonLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (_jsxs("div", { className: "buttonLine" + (this.props.isDisabled ? " disabled" : ""), children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("button", { onClick: () => this.props.onClick(), children: this.props.label })] }));
+    }
+}
+//# sourceMappingURL=buttonLineComponent.js.map

package/lines/buttonLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/buttonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,OAAO,CACH,eAAK,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,aACpE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAU,IACtE,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n    label: string;\r\n    onClick: () => void;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    isDisabled?: boolean;\r\n}\r\n\r\nexport class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {\r\n    constructor(props: IButtonLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className={\"buttonLine\" + (this.props.isDisabled ? \" disabled\" : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <button onClick={() => this.props.onClick()}>{this.props.label}</button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/checkBoxLineComponent.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "./../propertyChangedEvent";
+import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+export interface ICheckBoxLineComponentProps {
+    label?: string;
+    target?: any;
+    propertyName?: string;
+    isSelected?: () => boolean;
+    onSelect?: (value: boolean) => void;
+    onValueChanged?: () => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    disabled?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    faIcons?: {
+        enabled: IconDefinition;
+        disabled: IconDefinition;
+    };
+    large?: boolean;
+}
+export declare class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
+    isSelected: boolean;
+    isDisabled?: boolean;
+    isConflict: boolean;
+}> {
+    private _localChange;
+    constructor(props: ICheckBoxLineComponentProps);
+    shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
+        isSelected: boolean;
+        isDisabled: boolean;
+        isConflict: boolean;
+    }): boolean;
+    onChange(): void;
+    render(): JSX.Element;
+}

package/lines/checkBoxLineComponent.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { conflictingValuesPlaceholder } from "./targetsProxy.js";
+import toggleOnIcon_40px from "../imgs/toggleOnIcon_40px.svg";
+import toggleOffIcon_40px from "../imgs/toggleOffIcon_40px.svg";
+import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
+import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
+import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
+const Icons = {
+    size30: {
+        on: toggleOnIcon_30px,
+        mixed: toggleMixedIcon_30px,
+        off: toggleOffIcon_30px,
+    },
+    size40: {
+        on: toggleOnIcon_40px,
+        mixed: "",
+        off: toggleOffIcon_40px,
+    },
+};
+export class CheckBoxLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        if (this.props.isSelected) {
+            this.state = { isSelected: this.props.isSelected(), isConflict: false };
+        }
+        else {
+            this.state = {
+                isSelected: this.props.target[this.props.propertyName] === true,
+                isConflict: this.props.target[this.props.propertyName] === conflictingValuesPlaceholder,
+            };
+        }
+        if (this.props.disabled) {
+            this.state = { ...this.state, isDisabled: this.props.disabled };
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        let selected;
+        if (nextProps.isSelected) {
+            selected = nextProps.isSelected();
+        }
+        else {
+            selected = nextProps.target[nextProps.propertyName] === true;
+            if (nextProps.target[nextProps.propertyName] === conflictingValuesPlaceholder) {
+                nextState.isConflict = true;
+            }
+        }
+        if (selected !== nextState.isSelected || this._localChange) {
+            nextState.isSelected = selected;
+            this._localChange = false;
+            return true;
+        }
+        if (nextProps.disabled !== nextState.isDisabled) {
+            return true;
+        }
+        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;
+    }
+    onChange() {
+        this._localChange = true;
+        if (this.props.onSelect) {
+            this.props.onSelect(!this.state.isSelected);
+        }
+        else {
+            if (this.props.onPropertyChangedObservable) {
+                this.props.onPropertyChangedObservable.notifyObservers({
+                    object: this.props.target,
+                    property: this.props.propertyName,
+                    value: !this.state.isSelected,
+                    initialValue: this.state.isSelected,
+                });
+            }
+            if (this.props.target && this.props.propertyName) {
+                this.props.target[this.props.propertyName] = !this.state.isSelected;
+            }
+        }
+        if (this.props.onValueChanged) {
+            this.props.onValueChanged();
+        }
+        this.setState({ isSelected: !this.state.isSelected, isConflict: false });
+    }
+    render() {
+        const icons = this.props.large ? Icons.size40 : Icons.size30;
+        const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;
+        return (_jsxs("div", { className: "checkBoxLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && (_jsx("div", { className: "label", title: this.props.iconLabel, children: this.props.label })), this.props.faIcons && (_jsx(FontAwesomeIcon, { className: `cbx ${this.props.disabled ? "disabled" : ""}`, icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: () => !this.props.disabled && this.onChange() })), !this.props.faIcons && (_jsx("div", { className: "checkBox", children: _jsxs("label", { className: `container lbl${this.props.disabled ? " disabled" : ""} ${this.state.isSelected ? "checked" : ""}`, children: [_jsx("input", { type: "checkbox", className: `cbx hidden ${this.state.isConflict ? "conflict" : ""}`, checked: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled }), _jsx("img", { className: "icon", src: icon, alt: this.props.label })] }) }))] }));
+    }
+}
+//# sourceMappingURL=checkBoxLineComponent.js.map

package/lines/checkBoxLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n    label?: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    isSelected?: () => boolean;\r\n    onSelect?: (value: boolean) => void;\r\n    onValueChanged?: () => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    disabled?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n    large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon_40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon_40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon_30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon_30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon_30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n    size30: {\r\n        on: toggleOnIcon_30px,\r\n        mixed: toggleMixedIcon_30px,\r\n        off: toggleOffIcon_30px,\r\n    },\r\n    size40: {\r\n        on: toggleOnIcon_40px,\r\n        mixed: \"\", // unneeded\r\n        off: toggleOffIcon_40px,\r\n    },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n    private _localChange = false;\r\n    constructor(props: ICheckBoxLineComponentProps) {\r\n        super(props);\r\n\r\n        if (this.props.isSelected) {\r\n            this.state = { isSelected: this.props.isSelected(), isConflict: false };\r\n        } else {\r\n            this.state = {\r\n                isSelected: this.props.target[this.props.propertyName!] === true,\r\n                isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n            };\r\n        }\r\n\r\n        if (this.props.disabled) {\r\n            this.state = { ...this.state, isDisabled: this.props.disabled };\r\n        }\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n        let selected: boolean;\r\n\r\n        if (nextProps.isSelected) {\r\n            selected = nextProps.isSelected!();\r\n        } else {\r\n            selected = nextProps.target[nextProps.propertyName!] === true;\r\n            if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n                nextState.isConflict = true;\r\n            }\r\n        }\r\n\r\n        if (selected !== nextState.isSelected || this._localChange) {\r\n            nextState.isSelected = selected;\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.disabled !== nextState.isDisabled) {\r\n            return true;\r\n        }\r\n\r\n        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n    }\r\n\r\n    onChange() {\r\n        this._localChange = true;\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(!this.state.isSelected);\r\n        } else {\r\n            if (this.props.onPropertyChangedObservable) {\r\n                this.props.onPropertyChangedObservable.notifyObservers({\r\n                    object: this.props.target,\r\n                    property: this.props.propertyName!,\r\n                    value: !this.state.isSelected,\r\n                    initialValue: this.state.isSelected,\r\n                });\r\n            }\r\n\r\n            if (this.props.target && this.props.propertyName) {\r\n                this.props.target[this.props.propertyName!] = !this.state.isSelected;\r\n            }\r\n        }\r\n\r\n        if (this.props.onValueChanged) {\r\n            this.props.onValueChanged();\r\n        }\r\n\r\n        this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n    }\r\n\r\n    render() {\r\n        const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n        const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n        return (\r\n            <div className=\"checkBoxLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {this.props.label && (\r\n                    <div className=\"label\" title={this.props.iconLabel}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.faIcons && (\r\n                    <FontAwesomeIcon\r\n                        className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n                        icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n                        onClick={() => !this.props.disabled && this.onChange()}\r\n                    />\r\n                )}\r\n                {!this.props.faIcons && (\r\n                    <div className=\"checkBox\">\r\n                        <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n                                checked={this.state.isSelected}\r\n                                onChange={() => this.onChange()}\r\n                                disabled={!!this.props.disabled}\r\n                            />\r\n                            <img className=\"icon\" src={icon} alt={this.props.label} />\r\n                        </label>\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/color3LineComponent.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IColor3LineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    isLinear?: boolean;
+    icon?: string;
+    lockObject: LockObject;
+    iconLabel?: string;
+    onChange?: () => void;
+}
+export declare class Color3LineComponent extends React.Component<IColor3LineComponentProps> {
+    render(): JSX.Element;
+}

package/lines/color3LineComponent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ColorLineComponent } from "./colorLineComponent.js";
+export class Color3LineComponent extends React.Component {
+    render() {
+        const props = this.props;
+        return _jsx(ColorLineComponent, { disableAlpha: true, ...props });
+    }
+}
+//# sourceMappingURL=color3LineComponent.js.map

package/lines/color3LineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color3LineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/color3LineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAc1D,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,MAAM;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,OAAO,KAAC,kBAAkB,IAAC,YAAY,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;IACjE,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { ColorLineComponent } from \"./colorLineComponent\";\r\n\r\nexport interface IColor3LineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    isLinear?: boolean;\r\n    icon?: string;\r\n    lockObject: LockObject;\r\n    iconLabel?: string;\r\n    onChange?: () => void;\r\n}\r\n\r\nexport class Color3LineComponent extends React.Component<IColor3LineComponentProps> {\r\n    render() {\r\n        const props = this.props;\r\n        return <ColorLineComponent disableAlpha={true} {...props} />;\r\n    }\r\n}\r\n"]}

package/lines/color4LineComponent.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IColor4LineComponentProps {
+    label: string;
+    target?: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+}
+export declare class Color4LineComponent extends React.Component<IColor4LineComponentProps> {
+    render(): JSX.Element;
+}

package/lines/color4LineComponent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ColorLineComponent } from "./colorLineComponent.js";
+export class Color4LineComponent extends React.Component {
+    render() {
+        const props = this.props;
+        return _jsx(ColorLineComponent, { ...props });
+    }
+}
+//# sourceMappingURL=color4LineComponent.js.map

package/lines/color4LineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color4LineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/color4LineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAc1D,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,MAAM;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,OAAO,KAAC,kBAAkB,OAAK,KAAK,GAAI,CAAC;IAC7C,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { ColorLineComponent } from \"./colorLineComponent\";\r\n\r\nexport interface IColor4LineComponentProps {\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    lockObject: LockObject;\r\n}\r\n\r\nexport class Color4LineComponent extends React.Component<IColor4LineComponentProps> {\r\n    render() {\r\n        const props = this.props;\r\n        return <ColorLineComponent {...props} />;\r\n    }\r\n}\r\n"]}

package/lines/colorLineComponent.d.ts

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

package/lines/colorLineComponent.js

@@ -0,0 +1,145 @@
+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 "./colorPickerComponent.js";
+import { conflictingValuesPlaceholder } from "./targetsProxy.js";
+import copyIcon from "./copy.svg";
+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: "color3Line", children: [_jsxs("div", { className: "firstLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "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: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && (_jsxs("div", { className: "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/lines/colorLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/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 \"./colorPickerComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\n\r\nimport copyIcon from \"./copy.svg\";\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    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) return emptyColor;\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    render() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className=\"color3Line\">\r\n                <div className=\"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=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                    <div className=\"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=\"copy hoverIcon\" onClick={() => this.copyToClipboard()} title=\"Copy to clipboard\">\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                    <div className=\"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=\"secondLine\">\r\n                        <NumericInputComponent lockObject={this.props.lockObject} label=\"r\" value={this.state.color.r} onChange={(value) => this.updateStateR(value)} />\r\n                        <NumericInputComponent lockObject={this.props.lockObject} label=\"g\" value={this.state.color.g} onChange={(value) => this.updateStateG(value)} />\r\n                        <NumericInputComponent lockObject={this.props.lockObject} label=\"b\" value={this.state.color.b} onChange={(value) => this.updateStateB(value)} />\r\n                        {this.props.disableAlpha || (\r\n                            <NumericInputComponent lockObject={this.props.lockObject} label=\"a\" value={this.state.color.a} onChange={(value) => this.updateStateA(value)} />\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/colorPickerComponent.d.ts

@@ -0,0 +1,31 @@
+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;
+}
+interface IColorPickerComponentState {
+    pickerEnabled: boolean;
+    color: Color3 | Color4;
+    hex: string;
+}
+export declare class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+    private _floatRef;
+    private _floatHostRef;
+    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 {};

package/lines/colorPickerComponent.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ColorPicker } from "../colorPicker/colorPicker.js";
+export class ColorPickerLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };
+        this._floatRef = React.createRef();
+        this._floatHostRef = React.createRef();
+    }
+    syncPositions() {
+        const div = this._floatRef.current;
+        const host = this._floatHostRef.current;
+        if (!div || !host) {
+            return;
+        }
+        let top = host.getBoundingClientRect().top;
+        const height = div.getBoundingClientRect().height;
+        if (top + height + 10 > window.innerHeight) {
+            top = window.innerHeight - height - 10;
+        }
+        div.style.top = top + "px";
+        if (!this.props.shouldPopRight) {
+            div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
+        }
+        else {
+            div.style.left = host.getBoundingClientRect().left + "px";
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const diffProps = this.getHexString(nextProps) !== this.getHexString();
+        if (diffProps) {
+            nextState.color = nextProps.value;
+            nextState.hex = this.getHexString(nextProps);
+        }
+        return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
+    }
+    getHexString(props = this.props) {
+        return props.value.toHexString();
+    }
+    componentDidUpdate() {
+        this.syncPositions();
+    }
+    componentDidMount() {
+        this.syncPositions();
+    }
+    render() {
+        return (_jsxs("div", { className: "color-picker", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "color-rect-background", ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: _jsx("div", { className: "color-rect", style: { background: this.state.hex } }) }), this.state.pickerEnabled && (_jsx(_Fragment, { children: _jsx("div", { className: "color-picker-cover", onClick: (evt) => {
+                            var _a, _b;
+                            if (evt.target !== ((_b = (_a = this._floatRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelector(".color-picker-cover"))) {
+                                return;
+                            }
+                            this.setState({ pickerEnabled: false });
+                        }, children: _jsx("div", { className: "color-picker-float", ref: this._floatRef, children: _jsx(ColorPicker, { lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
+                                    const hex = color.toHexString();
+                                    this.setState({ hex, color });
+                                    this.props.onColorChanged(hex);
+                                } }) }) }) }))] }));
+    }
+}
+//# sourceMappingURL=colorPickerComponent.js.map

package/lines/colorPickerComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPickerComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/colorPickerComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAmBzD,MAAM,OAAO,wBAAyB,SAAQ,KAAK,CAAC,SAAiE;IAIjH,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;QAE9F,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC3C,CAAC;IAED,aAAa;QACT,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,OAAyB,CAAC;QACrD,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,OAAyB,CAAC;QAE1D,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;YACf,OAAO;SACV;QAED,IAAI,GAAG,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QAC3C,MAAM,MAAM,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAElD,IAAI,GAAG,GAAG,MAAM,GAAG,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE;YACxC,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;SAC1C;QAED,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;YAC5B,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC;SACjG;aAAM;YACH,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC;SAC7D;IACL,CAAC;IAED,qBAAqB,CAAC,SAAqC,EAAE,SAAqC;QAC9F,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAEvE,IAAI,SAAS,EAAE;YACX,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;YAClC,SAAS,CAAC,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;SAChD;QAED,OAAO,SAAS,IAAI,SAAS,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,CAAC,aAAa,KAAK,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;IACjH,CAAC;IAED,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC;IAED,kBAAkB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACF,OAAO,CACH,eAAK,SAAS,EAAC,cAAc,aACxB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,uBAAuB,EAAC,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,YACjH,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAQ,GACvE,EACL,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CACzB,4BACI,cACI,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;;4BACb,IAAI,GAAG,CAAC,MAAM,MAAK,MAAA,MAAA,IAAI,CAAC,SAAS,CAAC,OAAO,0CAAE,aAAa,0CAAE,aAAa,CAAC,qBAAqB,CAAC,CAAA,EAAE;gCAC5F,OAAO;6BACV;4BACD,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;wBAC5C,CAAC,YAED,cAAK,SAAS,EAAC,oBAAoB,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,YACnD,KAAC,WAAW,IACR,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,IAAK,EAAU,EAChD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,cAAc,EAAE,CAAC,KAAsB,EAAE,EAAE;oCACvC,MAAM,GAAG,GAAW,KAAK,CAAC,WAAW,EAAE,CAAC;oCACxC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;oCAC9B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;gCACnC,CAAC,GACH,GACA,GACJ,GACP,CACN,IACC,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Color4, Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPicker } from \"../colorPicker/colorPicker\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\nexport interface IColorPickerComponentProps {\r\n    value: Color4 | Color3;\r\n    linearHint?: boolean;\r\n    onColorChanged: (newOne: string) => void;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    shouldPopRight?: boolean;\r\n    lockObject?: LockObject;\r\n}\r\n\r\ninterface IColorPickerComponentState {\r\n    pickerEnabled: boolean;\r\n    color: Color3 | Color4;\r\n    hex: string;\r\n}\r\n\r\nexport class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {\r\n    private _floatRef: React.RefObject<HTMLDivElement>;\r\n    private _floatHostRef: React.RefObject<HTMLDivElement>;\r\n\r\n    constructor(props: IColorPickerComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };\r\n\r\n        this._floatRef = React.createRef();\r\n        this._floatHostRef = React.createRef();\r\n    }\r\n\r\n    syncPositions() {\r\n        const div = this._floatRef.current as HTMLDivElement;\r\n        const host = this._floatHostRef.current as HTMLDivElement;\r\n\r\n        if (!div || !host) {\r\n            return;\r\n        }\r\n\r\n        let top = host.getBoundingClientRect().top;\r\n        const height = div.getBoundingClientRect().height;\r\n\r\n        if (top + height + 10 > window.innerHeight) {\r\n            top = window.innerHeight - height - 10;\r\n        }\r\n\r\n        div.style.top = top + \"px\";\r\n        if (!this.props.shouldPopRight) {\r\n            div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + \"px\";\r\n        } else {\r\n            div.style.left = host.getBoundingClientRect().left + \"px\";\r\n        }\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {\r\n        const diffProps = this.getHexString(nextProps) !== this.getHexString();\r\n\r\n        if (diffProps) {\r\n            nextState.color = nextProps.value;\r\n            nextState.hex = this.getHexString(nextProps);\r\n        }\r\n\r\n        return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;\r\n    }\r\n\r\n    getHexString(props = this.props) {\r\n        return props.value.toHexString();\r\n    }\r\n\r\n    componentDidUpdate() {\r\n        this.syncPositions();\r\n    }\r\n\r\n    componentDidMount() {\r\n        this.syncPositions();\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"color-picker\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"color-rect-background\" ref={this._floatHostRef} onClick={() => this.setState({ pickerEnabled: true })}>\r\n                    <div className=\"color-rect\" style={{ background: this.state.hex }}></div>\r\n                </div>\r\n                {this.state.pickerEnabled && (\r\n                    <>\r\n                        <div\r\n                            className=\"color-picker-cover\"\r\n                            onClick={(evt) => {\r\n                                if (evt.target !== this._floatRef.current?.ownerDocument?.querySelector(\".color-picker-cover\")) {\r\n                                    return;\r\n                                }\r\n                                this.setState({ pickerEnabled: false });\r\n                            }}\r\n                        >\r\n                            <div className=\"color-picker-float\" ref={this._floatRef}>\r\n                                <ColorPicker\r\n                                    lockObject={this.props.lockObject || ({} as any)}\r\n                                    color={this.state.color}\r\n                                    linearhint={this.props.linearHint}\r\n                                    onColorChanged={(color: Color3 | Color4) => {\r\n                                        const hex: string = color.toHexString();\r\n                                        this.setState({ hex, color });\r\n                                        this.props.onColorChanged(hex);\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/draggableLineComponent.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface IButtonLineComponentProps {
+    data: string;
+    tooltip: string;
+}
+export declare class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
+    constructor(props: IButtonLineComponentProps);
+    render(): JSX.Element;
+}

package/lines/draggableLineComponent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export class DraggableLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (_jsx("div", { className: "draggableLine", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
+                event.dataTransfer.setData("babylonjs-gui-node", this.props.data);
+            }, children: this.props.data.replace("Block", "") }));
+    }
+}
+//# sourceMappingURL=draggableLineComponent.js.map

package/lines/draggableLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggableLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/draggableLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,OAAO,sBAAuB,SAAQ,KAAK,CAAC,SAAoC;IAClF,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,OAAO,CACH,cACI,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EACzB,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnB,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACtE,CAAC,YAEA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,GACnC,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n    data: string;\r\n    tooltip: string;\r\n}\r\n\r\nexport class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {\r\n    constructor(props: IButtonLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div\r\n                className=\"draggableLine\"\r\n                title={this.props.tooltip}\r\n                draggable={true}\r\n                onDragStart={(event) => {\r\n                    event.dataTransfer.setData(\"babylonjs-gui-node\", this.props.data);\r\n                }}\r\n            >\r\n                {this.props.data.replace(\"Block\", \"\")}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}