@babylonjs/shared-ui-components 5.28.0

package/colorPicker/colorComponentEntry.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IColorComponentEntryProps {
+    value: number;
+    label: string;
+    max?: number;
+    min?: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    lockObject: LockObject;
+}
+export declare class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+    constructor(props: IColorComponentEntryProps);
+    updateValue(valueString: string): void;
+    lock(): void;
+    unlock(): void;
+    render(): JSX.Element;
+}

package/colorPicker/colorComponentEntry.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class ColorComponentEntry extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    updateValue(valueString) {
+        if (/[^0-9.-]/g.test(valueString)) {
+            return;
+        }
+        let valueAsNumber = parseInt(valueString);
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+        if (this.props.max != undefined && valueAsNumber > this.props.max) {
+            valueAsNumber = this.props.max;
+        }
+        if (this.props.min != undefined && valueAsNumber < this.props.min) {
+            valueAsNumber = this.props.min;
+        }
+        this.props.onChange(valueAsNumber);
+    }
+    lock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = true;
+        }
+    }
+    unlock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    render() {
+        return (_jsxs("div", { className: "color-picker-component", children: [_jsx("div", { className: "color-picker-component-value", children: _jsx("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) }), _jsx("div", { className: "color-picker-component-label", children: this.props.label })] }));
+    }
+}
+//# sourceMappingURL=colorComponentEntry.js.map

package/colorPicker/colorComponentEntry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorComponentEntry.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/colorPicker/colorComponentEntry.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,WAAW,CAAC,WAAmB;QAC3B,IAAI,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC/B,OAAO;SACV;QAED,IAAI,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE1C,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE;YACtB,OAAO;SACV;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAC/D,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAC/D,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SAClC;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;SACrC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;SACtC;IACL,CAAC;IAEM,MAAM;QACT,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,aACnC,cAAK,SAAS,EAAC,8BAA8B,YACzC,gBACI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,EACrD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAC/B,GACA,EACN,cAAK,SAAS,EAAC,8BAA8B,YAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAO,IACpE,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\nexport interface IColorComponentEntryProps {\r\n    value: number;\r\n    label: string;\r\n    max?: number;\r\n    min?: number;\r\n    onChange: (value: number) => void;\r\n    disabled?: boolean;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {\r\n    constructor(props: IColorComponentEntryProps) {\r\n        super(props);\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        if (/[^0-9.-]/g.test(valueString)) {\r\n            return;\r\n        }\r\n\r\n        let valueAsNumber = parseInt(valueString);\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n        if (this.props.max != undefined && valueAsNumber > this.props.max) {\r\n            valueAsNumber = this.props.max;\r\n        }\r\n        if (this.props.min != undefined && valueAsNumber < this.props.min) {\r\n            valueAsNumber = this.props.min;\r\n        }\r\n\r\n        this.props.onChange(valueAsNumber);\r\n    }\r\n\r\n    lock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = true;\r\n        }\r\n    }\r\n\r\n    unlock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    public render() {\r\n        return (\r\n            <div className=\"color-picker-component\">\r\n                <div className=\"color-picker-component-value\">\r\n                    <input\r\n                        type=\"number\"\r\n                        step={1}\r\n                        className=\"numeric-input\"\r\n                        value={this.props.value}\r\n                        onBlur={() => this.unlock()}\r\n                        onFocus={() => this.lock()}\r\n                        onChange={(evt) => this.updateValue(evt.target.value)}\r\n                        disabled={this.props.disabled}\r\n                    />\r\n                </div>\r\n                <div className=\"color-picker-component-label\">{this.props.label}</div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/colorPicker/colorPicker.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import "./colorPicker.scss";
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerProps {
+    color: Color3 | Color4;
+    linearhint?: boolean;
+    debugMode?: boolean;
+    onColorChanged?: (color: Color3 | Color4) => void;
+    lockObject: LockObject;
+}
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerState {
+    color: Color3;
+    alpha: number;
+}
+/**
+ * Class used to create a color picker
+ */
+export declare class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+    private _saturationRef;
+    private _hueRef;
+    private _isSaturationPointerDown;
+    private _isHuePointerDown;
+    constructor(props: IColorPickerProps);
+    shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
+    onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    private _evaluateSaturation;
+    private _evaluateHue;
+    componentDidUpdate(): void;
+    raiseOnColorChanged(): void;
+    render(): JSX.Element;
+}

package/colorPicker/colorPicker.js

@@ -0,0 +1,137 @@
+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 { ColorComponentEntry } from "./colorComponentEntry.js";
+import { HexColor } from "./hexColor.js";
+import "./colorPicker.scss";
+/**
+ * Class used to create a color picker
+ */
+export class ColorPicker extends React.Component {
+    constructor(props) {
+        super(props);
+        if (this.props.color instanceof Color4) {
+            this.state = { color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };
+        }
+        else {
+            this.state = { color: this.props.color.clone(), alpha: 1 };
+        }
+        this._saturationRef = React.createRef();
+        this._hueRef = React.createRef();
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextProps.color.toHexString() !== this.props.color.toHexString() || nextState.color.toHexString() !== this.props.color.toHexString();
+    }
+    onSaturationPointerDown(evt) {
+        this._evaluateSaturation(evt);
+        this._isSaturationPointerDown = true;
+        evt.currentTarget.setPointerCapture(evt.pointerId);
+    }
+    onSaturationPointerUp(evt) {
+        this._isSaturationPointerDown = false;
+        evt.currentTarget.releasePointerCapture(evt.pointerId);
+    }
+    onSaturationPointerMove(evt) {
+        if (!this._isSaturationPointerDown) {
+            return;
+        }
+        this._evaluateSaturation(evt);
+    }
+    onHuePointerDown(evt) {
+        this._evaluateHue(evt);
+        this._isHuePointerDown = true;
+        evt.currentTarget.setPointerCapture(evt.pointerId);
+    }
+    onHuePointerUp(evt) {
+        this._isHuePointerDown = false;
+        evt.currentTarget.releasePointerCapture(evt.pointerId);
+    }
+    onHuePointerMove(evt) {
+        if (!this._isHuePointerDown) {
+            return;
+        }
+        this._evaluateHue(evt);
+    }
+    _evaluateSaturation(evt) {
+        const left = evt.nativeEvent.offsetX;
+        const top = evt.nativeEvent.offsetY;
+        const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current.clientWidth));
+        const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current.clientHeight));
+        if (this.props.debugMode) {
+            console.log("Saturation: " + saturation);
+            console.log("Value: " + value);
+        }
+        const hsv = this.state.color.toHSV();
+        Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);
+        if (this.state.alpha === 0) {
+            this.setState({ alpha: 1 });
+        }
+        this.setState({ color: this.state.color });
+    }
+    _evaluateHue(evt) {
+        const left = evt.nativeEvent.offsetX;
+        const hue = 360 * Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current.clientWidth));
+        if (this.props.debugMode) {
+            console.log("Hue: " + hue);
+        }
+        const hsv = this.state.color.toHSV();
+        Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);
+        this.setState({ color: this.state.color });
+    }
+    componentDidUpdate() {
+        this.raiseOnColorChanged();
+    }
+    raiseOnColorChanged() {
+        if (!this.props.onColorChanged) {
+            return;
+        }
+        if (this.props.color instanceof Color4) {
+            const newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);
+            this.props.onColorChanged(newColor4);
+            return;
+        }
+        this.props.onColorChanged(this.state.color.clone());
+    }
+    render() {
+        const color4 = Color4.FromColor3(this.state.color);
+        color4.a = this.state.alpha;
+        const colorHex = color4.toHexString();
+        const hsv = this.state.color.toHSV();
+        const colorRef = new Color3();
+        Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
+        const colorHexRef = colorRef.toHexString();
+        const hasAlpha = this.props.color instanceof Color4;
+        return (_jsxs("div", { className: "color-picker-container" + (this.props.linearhint ? " with-hints" : ""), children: [_jsxs("div", { className: "color-picker-saturation", onPointerMove: (e) => this.onSaturationPointerMove(e), onPointerDown: (e) => this.onSaturationPointerDown(e), onPointerUp: (e) => this.onSaturationPointerUp(e), ref: this._saturationRef, style: {
+                        background: colorHexRef,
+                    }, children: [_jsx("div", { className: "color-picker-saturation-white" }), _jsx("div", { className: "color-picker-saturation-black" }), _jsx("div", { className: "color-picker-saturation-cursor", style: {
+                                top: `${-(hsv.b * 100) + 100}%`,
+                                left: `${hsv.g * 100}%`,
+                            } })] }), _jsxs("div", { className: "color-picker-hue", children: [_jsx("div", { className: "color-picker-hue-color", style: {
+                                background: colorHex,
+                            } }), _jsx("div", { className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: _jsx("div", { className: "color-picker-hue-cursor", style: {
+                                    left: `${(hsv.r / 360.0) * 100}%`,
+                                    border: `1px solid ` + colorHexRef,
+                                } }) })] }), _jsx("div", { className: "color-picker-alpha" }), _jsxs("div", { className: "color-picker-rgb", children: [_jsx("div", { className: "red", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
+                                    this.state.color.r = value / 255.0;
+                                    this.forceUpdate();
+                                } }) }), _jsx("div", { className: "green", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
+                                    this.state.color.g = value / 255.0;
+                                    this.forceUpdate();
+                                } }) }), _jsx("div", { className: "blue", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
+                                    this.state.color.b = value / 255.0;
+                                    this.forceUpdate();
+                                } }) }), _jsx("div", { className: "alpha" + (hasAlpha ? "" : " grayed"), children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
+                                    this.setState({ alpha: value / 255.0 });
+                                    this.forceUpdate();
+                                } }) })] }), _jsxs("div", { className: "color-picker-hex", children: [_jsx("div", { className: "color-picker-hex-label", children: "Hex" }), _jsx("div", { className: "color-picker-hex-value", children: _jsx(HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
+                                    if (hasAlpha) {
+                                        const color4 = Color4.FromHexString(value);
+                                        this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });
+                                    }
+                                    else {
+                                        this.setState({ color: Color3.FromHexString(value) });
+                                    }
+                                } }) })] }), this.props.linearhint && (_jsx("div", { className: "color-picker-warning", children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" }))] }));
+    }
+}
+//# sourceMappingURL=colorPicker.js.map

package/colorPicker/colorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/colorPicker/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorComponentEntry } from \"./colorComponentEntry\";\r\nimport { HexColor } from \"./hexColor\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\nimport \"./colorPicker.scss\";\r\n\r\n/**\r\n * Interface used to specify creation options for color picker\r\n */\r\nexport interface IColorPickerProps {\r\n    color: Color3 | Color4;\r\n    linearhint?: boolean;\r\n    debugMode?: boolean;\r\n    onColorChanged?: (color: Color3 | Color4) => void;\r\n    lockObject: LockObject;\r\n}\r\n\r\n/**\r\n * Interface used to specify creation options for color picker\r\n */\r\nexport interface IColorPickerState {\r\n    color: Color3;\r\n    alpha: number;\r\n}\r\n\r\n/**\r\n * Class used to create a color picker\r\n */\r\nexport class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {\r\n    private _saturationRef: React.RefObject<HTMLDivElement>;\r\n    private _hueRef: React.RefObject<HTMLDivElement>;\r\n    private _isSaturationPointerDown: boolean;\r\n    private _isHuePointerDown: boolean;\r\n\r\n    constructor(props: IColorPickerProps) {\r\n        super(props);\r\n        if (this.props.color instanceof Color4) {\r\n            this.state = { color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };\r\n        } else {\r\n            this.state = { color: this.props.color.clone(), alpha: 1 };\r\n        }\r\n        this._saturationRef = React.createRef();\r\n        this._hueRef = React.createRef();\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState) {\r\n        return nextProps.color.toHexString() !== this.props.color.toHexString() || nextState.color.toHexString() !== this.props.color.toHexString();\r\n    }\r\n\r\n    onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n        this._evaluateSaturation(evt);\r\n        this._isSaturationPointerDown = true;\r\n\r\n        evt.currentTarget.setPointerCapture(evt.pointerId);\r\n    }\r\n\r\n    onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n        this._isSaturationPointerDown = false;\r\n        evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n    }\r\n\r\n    onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n        if (!this._isSaturationPointerDown) {\r\n            return;\r\n        }\r\n        this._evaluateSaturation(evt);\r\n    }\r\n\r\n    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n        this._evaluateHue(evt);\r\n        this._isHuePointerDown = true;\r\n\r\n        evt.currentTarget.setPointerCapture(evt.pointerId);\r\n    }\r\n\r\n    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n        this._isHuePointerDown = false;\r\n        evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n    }\r\n\r\n    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n        if (!this._isHuePointerDown) {\r\n            return;\r\n        }\r\n        this._evaluateHue(evt);\r\n    }\r\n\r\n    private _evaluateSaturation(evt: React.PointerEvent<HTMLDivElement>) {\r\n        const left = evt.nativeEvent.offsetX;\r\n        const top = evt.nativeEvent.offsetY;\r\n\r\n        const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current!.clientWidth));\r\n        const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current!.clientHeight));\r\n\r\n        if (this.props.debugMode) {\r\n            console.log(\"Saturation: \" + saturation);\r\n            console.log(\"Value: \" + value);\r\n        }\r\n\r\n        const hsv = this.state.color.toHSV();\r\n        Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);\r\n        if (this.state.alpha === 0) {\r\n            this.setState({ alpha: 1 });\r\n        }\r\n        this.setState({ color: this.state.color });\r\n    }\r\n\r\n    private _evaluateHue(evt: React.PointerEvent<HTMLDivElement>) {\r\n        const left = evt.nativeEvent.offsetX;\r\n\r\n        const hue = 360 * Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current!.clientWidth));\r\n\r\n        if (this.props.debugMode) {\r\n            console.log(\"Hue: \" + hue);\r\n        }\r\n\r\n        const hsv = this.state.color.toHSV();\r\n        Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);\r\n        this.setState({ color: this.state.color });\r\n    }\r\n\r\n    componentDidUpdate() {\r\n        this.raiseOnColorChanged();\r\n    }\r\n\r\n    raiseOnColorChanged() {\r\n        if (!this.props.onColorChanged) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.color instanceof Color4) {\r\n            const newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);\r\n\r\n            this.props.onColorChanged(newColor4);\r\n\r\n            return;\r\n        }\r\n\r\n        this.props.onColorChanged(this.state.color.clone());\r\n    }\r\n\r\n    public render() {\r\n        const color4 = Color4.FromColor3(this.state.color);\r\n        color4.a = this.state.alpha;\r\n        const colorHex = color4.toHexString();\r\n        const hsv = this.state.color.toHSV();\r\n        const colorRef = new Color3();\r\n        Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);\r\n        const colorHexRef = colorRef.toHexString();\r\n        const hasAlpha = this.props.color instanceof Color4;\r\n\r\n        return (\r\n            <div className={\"color-picker-container\" + (this.props.linearhint ? \" with-hints\" : \"\")}>\r\n                <div\r\n                    className=\"color-picker-saturation\"\r\n                    onPointerMove={(e) => this.onSaturationPointerMove(e)}\r\n                    onPointerDown={(e) => this.onSaturationPointerDown(e)}\r\n                    onPointerUp={(e) => this.onSaturationPointerUp(e)}\r\n                    ref={this._saturationRef}\r\n                    style={{\r\n                        background: colorHexRef,\r\n                    }}\r\n                >\r\n                    <div className=\"color-picker-saturation-white\"></div>\r\n                    <div className=\"color-picker-saturation-black\"></div>\r\n                    <div\r\n                        className=\"color-picker-saturation-cursor\"\r\n                        style={{\r\n                            top: `${-(hsv.b * 100) + 100}%`,\r\n                            left: `${hsv.g * 100}%`,\r\n                        }}\r\n                    ></div>\r\n                </div>\r\n                <div className=\"color-picker-hue\">\r\n                    <div\r\n                        className=\"color-picker-hue-color\"\r\n                        style={{\r\n                            background: colorHex,\r\n                        }}\r\n                    ></div>\r\n                    <div\r\n                        className=\"color-picker-hue-slider\"\r\n                        ref={this._hueRef}\r\n                        onPointerMove={(e) => this.onHuePointerMove(e)}\r\n                        onPointerDown={(e) => this.onHuePointerDown(e)}\r\n                        onPointerUp={(e) => this.onHuePointerUp(e)}\r\n                    >\r\n                        <div\r\n                            className=\"color-picker-hue-cursor\"\r\n                            style={{\r\n                                left: `${(hsv.r / 360.0) * 100}%`,\r\n                                border: `1px solid ` + colorHexRef,\r\n                            }}\r\n                        ></div>\r\n                    </div>\r\n                </div>\r\n                <div className=\"color-picker-alpha\"></div>\r\n                <div className=\"color-picker-rgb\">\r\n                    <div className=\"red\">\r\n                        <ColorComponentEntry\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"R\"\r\n                            min={0}\r\n                            max={255}\r\n                            value={Math.round(this.state.color.r * 255)}\r\n                            onChange={(value) => {\r\n                                this.state.color.r = value / 255.0;\r\n                                this.forceUpdate();\r\n                            }}\r\n                        />\r\n                    </div>\r\n                    <div className=\"green\">\r\n                        <ColorComponentEntry\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"G\"\r\n                            min={0}\r\n                            max={255}\r\n                            value={Math.round(this.state.color.g * 255)}\r\n                            onChange={(value) => {\r\n                                this.state.color.g = value / 255.0;\r\n                                this.forceUpdate();\r\n                            }}\r\n                        />\r\n                    </div>\r\n                    <div className=\"blue\">\r\n                        <ColorComponentEntry\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"B\"\r\n                            min={0}\r\n                            max={255}\r\n                            value={Math.round(this.state.color.b * 255)}\r\n                            onChange={(value) => {\r\n                                this.state.color.b = value / 255.0;\r\n                                this.forceUpdate();\r\n                            }}\r\n                        />\r\n                    </div>\r\n                    <div className={\"alpha\" + (hasAlpha ? \"\" : \" grayed\")}>\r\n                        <ColorComponentEntry\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"A\"\r\n                            min={0}\r\n                            max={255}\r\n                            value={Math.round(this.state.alpha * 255)}\r\n                            onChange={(value) => {\r\n                                this.setState({ alpha: value / 255.0 });\r\n                                this.forceUpdate();\r\n                            }}\r\n                        />\r\n                    </div>\r\n                </div>\r\n                <div className=\"color-picker-hex\">\r\n                    <div className=\"color-picker-hex-label\">Hex</div>\r\n                    <div className=\"color-picker-hex-value\">\r\n                        <HexColor\r\n                            lockObject={this.props.lockObject}\r\n                            expectedLength={hasAlpha ? 8 : 6}\r\n                            value={colorHex}\r\n                            onChange={(value) => {\r\n                                if (hasAlpha) {\r\n                                    const color4 = Color4.FromHexString(value);\r\n                                    this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });\r\n                                } else {\r\n                                    this.setState({ color: Color3.FromHexString(value) });\r\n                                }\r\n                            }}\r\n                        />\r\n                    </div>\r\n                </div>\r\n                {this.props.linearhint && (\r\n                    <div className=\"color-picker-warning\">\r\n                        (Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/colorPicker/hexColor.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IHexColorProps {
+    value: string;
+    expectedLength: number;
+    onChange: (value: string) => void;
+    lockObject: LockObject;
+}
+export declare class HexColor extends React.Component<IHexColorProps, {
+    hex: string;
+}> {
+    constructor(props: IHexColorProps);
+    shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
+        hex: string;
+    }): boolean;
+    lock(): void;
+    unlock(): void;
+    updateHexValue(valueString: string): void;
+    render(): JSX.Element;
+}

package/colorPicker/hexColor.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export class HexColor extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hex: this.props.value.replace("#", "") };
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.value !== this.props.value) {
+            nextState.hex = nextProps.value.replace("#", "");
+        }
+        return true;
+    }
+    lock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = true;
+        }
+    }
+    unlock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    updateHexValue(valueString) {
+        if (valueString != "" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {
+            return;
+        }
+        this.setState({ hex: valueString });
+        if (valueString.length !== this.props.expectedLength) {
+            if (this.props.expectedLength === 8 && valueString.length === 6) {
+                valueString = valueString + "FF";
+            }
+            else {
+                return;
+            }
+        }
+        this.props.onChange("#" + valueString);
+    }
+    render() {
+        return (_jsx("input", { type: "string", className: "hex-input", value: this.state.hex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateHexValue(evt.target.value) }));
+    }
+}
+//# sourceMappingURL=hexColor.js.map

package/colorPicker/hexColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexColor.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/colorPicker/hexColor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,OAAO,QAAS,SAAQ,KAAK,CAAC,SAA0C;IAC1E,YAAY,KAAqB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;IAC5D,CAAC;IAED,qBAAqB,CAAC,SAAyB,EAAE,SAA0B;QACvE,IAAI,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACtC,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SACpD;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;SACrC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;SACtC;IACL,CAAC;IAED,cAAc,CAAC,WAAmB;QAC9B,IAAI,WAAW,IAAI,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,EAAE;YACnE,OAAO;SACV;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC,CAAC;QAEpC,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;YAClD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC7D,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;aACpC;iBAAM;gBACH,OAAO;aACV;SACJ;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC;IAC3C,CAAC;IAEM,MAAM;QACT,OAAO,CACH,gBACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACrB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1D,CACL,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\nexport interface IHexColorProps {\r\n    value: string;\r\n    expectedLength: number;\r\n    onChange: (value: string) => void;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class HexColor extends React.Component<IHexColorProps, { hex: string }> {\r\n    constructor(props: IHexColorProps) {\r\n        super(props);\r\n\r\n        this.state = { hex: this.props.value.replace(\"#\", \"\") };\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IHexColorProps, nextState: { hex: string }) {\r\n        if (nextProps.value !== this.props.value) {\r\n            nextState.hex = nextProps.value.replace(\"#\", \"\");\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    lock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = true;\r\n        }\r\n    }\r\n\r\n    unlock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    updateHexValue(valueString: string) {\r\n        if (valueString != \"\" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {\r\n            return;\r\n        }\r\n\r\n        this.setState({ hex: valueString });\r\n\r\n        if (valueString.length !== this.props.expectedLength) {\r\n            if (this.props.expectedLength === 8 && valueString.length === 6) {\r\n                valueString = valueString + \"FF\";\r\n            } else {\r\n                return;\r\n            }\r\n        }\r\n\r\n        this.props.onChange(\"#\" + valueString);\r\n    }\r\n\r\n    public render() {\r\n        return (\r\n            <input\r\n                type=\"string\"\r\n                className=\"hex-input\"\r\n                value={this.state.hex}\r\n                onBlur={() => this.unlock()}\r\n                onFocus={() => this.lock()}\r\n                onChange={(evt) => this.updateHexValue(evt.target.value)}\r\n            />\r\n        );\r\n    }\r\n}\r\n"]}

package/components/Button.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type ButtonProps = {
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    color: "light" | "dark";
+    size: "default" | "small" | "wide";
+    title?: string;
+};
+export declare const Button: React.FC<ButtonProps>;

package/components/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Button.modules.scss";
+import { ClassNames } from "./classNames.js";
+export const Button = ({ disabled, active, onClick, children, color, size, title }) => {
+    return (_jsx("button", { className: ClassNames({ button: true, active, wide: size === "wide", small: size === "small", light: color === "light", dark: color === "dark" }, styles), disabled: disabled, onClick: onClick, title: title, children: children }));
+};
+//# sourceMappingURL=Button.js.map

package/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAW1C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IACzG,OAAO,CACH,iBACI,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,EACzJ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEX,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"./Button.modules.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport type ButtonProps = {\r\n    disabled?: boolean;\r\n    active?: boolean;\r\n    onClick?: () => void;\r\n    color: \"light\" | \"dark\";\r\n    size: \"default\" | \"small\" | \"wide\";\r\n    title?: string;\r\n};\r\n\r\nexport const Button: React.FC<ButtonProps> = ({ disabled, active, onClick, children, color, size, title }) => {\r\n    return (\r\n        <button\r\n            className={ClassNames({ button: true, active, wide: size === \"wide\", small: size === \"small\", light: color === \"light\", dark: color === \"dark\" }, styles)}\r\n            disabled={disabled}\r\n            onClick={onClick}\r\n            title={title}\r\n        >\r\n            {children}\r\n        </button>\r\n    );\r\n};\r\n"]}

package/components/Icon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type IconProps = {
+    color?: "dark" | "light";
+    icon: string;
+};
+export declare const Icon: React.FC<IconProps>;

package/components/Icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClassNames } from "./classNames.js";
+import styles from "./Icon.modules.scss";
+export const Icon = ({ color = "dark", icon }) => {
+    return _jsx("img", { src: icon, style: { width: "30px", height: "30px" }, className: ClassNames({ light: color === "light" }, styles) });
+};
+//# sourceMappingURL=Icon.js.map

package/components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAOzC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,EAAE,MAAM,CAAC,GAAI,CAAC;AACrI,CAAC,CAAC","sourcesContent":["import { ClassNames } from \"./classNames\";\r\nimport styles from \"./Icon.modules.scss\";\r\n\r\nexport type IconProps = {\r\n    color?: \"dark\" | \"light\";\r\n    icon: string;\r\n};\r\n\r\nexport const Icon: React.FC<IconProps> = ({ color = \"dark\", icon }) => {\r\n    return <img src={icon} style={{ width: \"30px\", height: \"30px\" }} className={ClassNames({ light: color === \"light\" }, styles)} />;\r\n};\r\n"]}

package/components/Label.d.ts

@@ -0,0 +1,7 @@
+import type { ReactChild } from "react";
+export declare type LabelProps = {
+    text: string;
+    children?: ReactChild;
+    color?: "dark" | "light";
+};
+export declare const Label: React.FC<LabelProps>;

package/components/Label.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClassNames } from "./classNames.js";
+import styles from "./Label.modules.scss";
+export const Label = ({ text, children, color }) => {
+    return (_jsxs("label", { className: ClassNames({ label: true, light: color === "light", dark: color === "dark" }, styles), children: [_jsx("span", { children: text }), children] }));
+};
+//# sourceMappingURL=Label.js.map

package/components/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/Label.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAQ1C,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,OAAO,CACH,iBAAO,SAAS,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,aACnG,yBAAO,IAAI,GAAQ,EAClB,QAAQ,IACL,CACX,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ReactChild } from \"react\";\r\nimport { ClassNames } from \"./classNames\";\r\nimport styles from \"./Label.modules.scss\";\r\n\r\nexport type LabelProps = {\r\n    text: string;\r\n    children?: ReactChild;\r\n    color?: \"dark\" | \"light\";\r\n};\r\n\r\nexport const Label: React.FC<LabelProps> = ({ text, children, color }) => {\r\n    return (\r\n        <label className={ClassNames({ label: true, light: color === \"light\", dark: color === \"dark\" }, styles)}>\r\n            <span>{text}</span>\r\n            {children}\r\n        </label>\r\n    );\r\n};\r\n"]}

package/components/MessageDialog.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface MessageDialogProps {
+    message: string;
+    isError: boolean;
+    onClose?: () => void;
+}
+export declare const MessageDialog: React.FC<MessageDialogProps>;

package/components/MessageDialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ClassNames } from "./classNames.js";
+import styles from "./MessageDialog.modules.scss";
+export const MessageDialog = (props) => {
+    const [message, setMessage] = useState(props.message);
+    const [isError, setIsError] = useState(props.isError);
+    useEffect(() => {
+        setMessage(props.message);
+        setIsError(props.isError);
+    }, [props]);
+    const onClick = () => {
+        setMessage("");
+        if (props.onClose) {
+            props.onClose();
+        }
+    };
+    if (!message) {
+        return null;
+    }
+    return (_jsx("div", { className: styles["dialog-container"], children: _jsxs("div", { className: styles["dialog"], children: [_jsx("div", { className: styles["dialog-message"], children: message }), _jsx("div", { className: styles["dialog-buttons"], children: _jsx("div", { className: ClassNames({ "dialog-button-ok": true, error: isError }, styles), onClick: onClick, children: "OK" }) })] }) }));
+};
+//# sourceMappingURL=MessageDialog.js.map

package/components/MessageDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/MessageDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAQlD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC1B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE;QACV,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,YACtC,eAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,aAC5B,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,YAAG,OAAO,GAAO,EACzD,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,YACpC,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,mBAE5F,GACJ,IACJ,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useState, useEffect } from \"react\";\r\nimport * as React from \"react\";\r\nimport { ClassNames } from \"./classNames\";\r\nimport styles from \"./MessageDialog.modules.scss\";\r\n\r\nexport interface MessageDialogProps {\r\n    message: string;\r\n    isError: boolean;\r\n    onClose?: () => void;\r\n}\r\n\r\nexport const MessageDialog: React.FC<MessageDialogProps> = (props) => {\r\n    const [message, setMessage] = useState(props.message);\r\n    const [isError, setIsError] = useState(props.isError);\r\n\r\n    useEffect(() => {\r\n        setMessage(props.message);\r\n        setIsError(props.isError);\r\n    }, [props]);\r\n\r\n    const onClick = () => {\r\n        setMessage(\"\");\r\n        if (props.onClose) {\r\n            props.onClose();\r\n        }\r\n    };\r\n\r\n    if (!message) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <div className={styles[\"dialog-container\"]}>\r\n            <div className={styles[\"dialog\"]}>\r\n                <div className={styles[\"dialog-message\"]}>{message}</div>\r\n                <div className={styles[\"dialog-buttons\"]}>\r\n                    <div className={ClassNames({ \"dialog-button-ok\": true, error: isError }, styles)} onClick={onClick}>\r\n                        OK\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/Toggle.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type ToggleProps = {
+    toggled: "on" | "mixed" | "off";
+    onToggle?: () => void;
+    padded?: boolean;
+    color?: "dark" | "light";
+};
+export declare const Toggle: React.FC<ToggleProps>;

package/components/Toggle.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./Toggle.modules.scss";
+import { ClassNames } from "./classNames.js";
+import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
+import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
+import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
+import { Icon } from "./Icon.js";
+const Icons = {
+    on: toggleOnIcon_30px,
+    mixed: toggleMixedIcon_30px,
+    off: toggleOffIcon_30px,
+};
+export const Toggle = ({ color = "dark", toggled = "off", padded = false, onToggle = () => { } }) => {
+    return (_jsxs("label", { className: ClassNames({ toggle: true, padded }, styles), children: [_jsx("input", { type: "checkbox", style: { display: "none" }, checked: toggled === "on", onChange: () => onToggle() }), _jsx(Icon, { icon: Icons[toggled], color: color })] }));
+};
+//# sourceMappingURL=Toggle.js.map

package/components/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/Toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AACpE,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,KAAK,GAAG;IACV,EAAE,EAAE,iBAAiB;IACrB,KAAK,EAAE,oBAAoB;IAC3B,GAAG,EAAE,kBAAkB;CAC1B,CAAC;AASF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,EAAE;IACtH,OAAO,CACH,iBAAO,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,aAC1D,gBAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,GAAI,EAC5G,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,IACxC,CACX,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"./Toggle.modules.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\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\nimport { Icon } from \"./Icon\";\r\n\r\nconst Icons = {\r\n    on: toggleOnIcon_30px,\r\n    mixed: toggleMixedIcon_30px,\r\n    off: toggleOffIcon_30px,\r\n};\r\n\r\nexport type ToggleProps = {\r\n    toggled: \"on\" | \"mixed\" | \"off\";\r\n    onToggle?: () => void;\r\n    padded?: boolean;\r\n    color?: \"dark\" | \"light\";\r\n};\r\n\r\nexport const Toggle: React.FC<ToggleProps> = ({ color = \"dark\", toggled = \"off\", padded = false, onToggle = () => {} }) => {\r\n    return (\r\n        <label className={ClassNames({ toggle: true, padded }, styles)}>\r\n            <input type=\"checkbox\" style={{ display: \"none\" }} checked={toggled === \"on\"} onChange={() => onToggle()} />\r\n            <Icon icon={Icons[toggled]} color={color} />\r\n        </label>\r\n    );\r\n};\r\n"]}

package/components/bars/CommandBarComponent.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+export interface ICommandBarComponentProps {
+    onSaveButtonClicked?: () => void;
+    onSaveToSnippetButtonClicked?: () => void;
+    onLoadFromSnippetButtonClicked?: () => void;
+    onHelpButtonClicked?: () => void;
+    onGiveFeedbackButtonClicked?: () => void;
+    onSelectButtonClicked?: () => void;
+    onPanButtonClicked?: () => void;
+    onZoomButtonClicked?: () => void;
+    onFitButtonClicked?: () => void;
+    onArtboardColorChanged?: (newColor: string) => void;
+    artboardColor?: string;
+    artboardColorPickerColor?: string;
+}
+export declare const CommandBarComponent: FC<ICommandBarComponentProps>;

package/components/bars/CommandBarComponent.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JoinClassNames } from "../classNames.js";
+import { CommandButtonComponent } from "./CommandButtonComponent.js";
+import { CommandDropdownComponent } from "./CommandDropdownComponent.js";
+import hamburgerIcon from "../../imgs/hamburgerIcon.svg";
+import pointerIcon from "../../imgs/pointerIcon.svg";
+import handIcon from "../../imgs/handIcon.svg";
+import zoomIcon from "../../imgs/zoomIcon.svg";
+import logoIcon from "../../imgs/babylonLogo.svg";
+import canvasFitIcon from "../../imgs/canvasFitIcon.svg";
+import betaFlag from "../../imgs/betaFlag.svg";
+import style from "./CommandBar.modules.scss";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { ColorPickerLineComponent } from "../lines/ColorPickerLineComponent.js";
+export const CommandBarComponent = (props) => {
+    return (_jsxs("div", { className: style.commandBar, children: [_jsxs("div", { className: style.commandsLeft, children: [_jsxs("div", { className: style.divider, children: [_jsx("img", { src: logoIcon, color: "white", className: "active", draggable: false }), _jsx(CommandDropdownComponent
+                            //globalState={this.props.globalState}
+                            , { 
+                                //globalState={this.props.globalState}
+                                toRight: true, icon: hamburgerIcon, tooltip: "Options", items: [
+                                    {
+                                        label: "Save",
+                                        onClick: () => {
+                                            props.onSaveButtonClicked && props.onSaveButtonClicked();
+                                        },
+                                    },
+                                    {
+                                        label: "Load",
+                                        fileButton: true,
+                                    },
+                                    {
+                                        label: "Save to snippet",
+                                        onClick: () => {
+                                            props.onSaveToSnippetButtonClicked && props.onSaveToSnippetButtonClicked();
+                                        },
+                                    },
+                                    {
+                                        label: "Load from snippet",
+                                        onClick: () => {
+                                            props.onLoadFromSnippetButtonClicked && props.onLoadFromSnippetButtonClicked();
+                                        },
+                                    },
+                                    {
+                                        label: "Help",
+                                        onClick: () => {
+                                            props.onHelpButtonClicked && props.onHelpButtonClicked();
+                                        },
+                                    },
+                                    {
+                                        label: "Give feedback",
+                                        onClick: () => {
+                                            props.onGiveFeedbackButtonClicked && props.onGiveFeedbackButtonClicked();
+                                        },
+                                    },
+                                ] }), _jsx(CommandButtonComponent, { tooltip: "Select", icon: pointerIcon, shortcut: "S", isActive: false, onClick: () => {
+                                    props.onSelectButtonClicked && props.onSelectButtonClicked();
+                                } }), _jsx(CommandButtonComponent, { tooltip: "Pan", icon: handIcon, shortcut: "P", isActive: false, onClick: () => {
+                                    props.onPanButtonClicked && props.onPanButtonClicked();
+                                } }), _jsx(CommandButtonComponent, { tooltip: "Zoom", shortcut: "Z", icon: zoomIcon, isActive: false, onClick: () => {
+                                    props.onZoomButtonClicked && props.onZoomButtonClicked();
+                                } })] }), _jsx("div", { className: style.divider, children: _jsx(CommandButtonComponent, { tooltip: "Fit to Window", shortcut: "F", icon: canvasFitIcon, isActive: false, onClick: () => {
+                                props.onFitButtonClicked && props.onFitButtonClicked();
+                            } }) }), _jsxs("div", { className: JoinClassNames(style, "divider", "padded"), children: [_jsx("div", { style: { paddingRight: "5px" }, children: "Artboard:" }), props.onArtboardColorChanged && (_jsx(ColorPickerLineComponent, { backgroundColor: props.artboardColorPickerColor || "#888888", value: props.artboardColor ? Color3.FromHexString(props.artboardColor) : new Color3(0, 0, 0), onColorChanged: (newColor) => {
+                                    if (props.onArtboardColorChanged) {
+                                        props.onArtboardColorChanged(newColor);
+                                    }
+                                } }))] })] }), _jsx("div", { className: style.commandsRight, children: _jsx("img", { src: betaFlag, className: style.betaFlag, draggable: false }) })] }));
+};
+//# sourceMappingURL=CommandBarComponent.js.map