@babylonjs/shared-ui-components 7.34.4 → 7.35.0

package/colorPicker/colorComponentEntry.js.map

@@ -1 +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;IAEe,MAAM;QAClB,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 override 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"]}
+{"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,CAAC;YAChC,OAAO;QACX,CAAC;QAED,IAAI,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE1C,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YACvB,OAAO;QACX,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;YAChE,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;YAChE,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;QACtC,CAAC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;QACvC,CAAC;IACL,CAAC;IAEe,MAAM;QAClB,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 override 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.js.map

@@ -1 +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\nimport { Logger } from \"core/Misc/logger\";\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    override 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            Logger.Log(\"Saturation: \" + saturation);\r\n            Logger.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            Logger.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    override 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 override 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"]}
+{"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\nimport { Logger } from \"core/Misc/logger\";\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    override 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            Logger.Log(\"Saturation: \" + saturation);\r\n            Logger.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            Logger.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    override 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 override 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.js.map

@@ -1 +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;IAEQ,qBAAqB,CAAC,SAAyB,EAAE,SAA0B;QAChF,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,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;gBACpE,WAAW,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aAC7C;iBAAM;gBACH,OAAO;aACV;SACJ;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC;IAC3C,CAAC;IAEe,MAAM;QAClB,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    override 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 if (this.props.expectedLength === 6 && valueString.length === 8) {\r\n                valueString = valueString.substring(0, 6);\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 override 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"]}
+{"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;IAEQ,qBAAqB,CAAC,SAAyB,EAAE,SAA0B;QAChF,IAAI,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACvC,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrD,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;QACtC,CAAC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;QACvC,CAAC;IACL,CAAC;IAED,cAAc,CAAC,WAAmB;QAC9B,IAAI,WAAW,IAAI,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,EAAE,CAAC;YACpE,OAAO;QACX,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC,CAAC;QAEpC,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YACnD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC9D,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;YACrC,CAAC;iBAAM,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACrE,WAAW,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC9C,CAAC;iBAAM,CAAC;gBACJ,OAAO;YACX,CAAC;QACL,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC;IAC3C,CAAC;IAEe,MAAM;QAClB,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    override 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 if (this.props.expectedLength === 6 && valueString.length === 8) {\r\n                valueString = valueString.substring(0, 6);\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 override 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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ButtonProps = {
     disabled?: boolean;
     active?: boolean;

package/components/Icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type IconProps = {
     color?: "dark" | "light";
     icon: string;

package/components/MessageDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/MessageDialog.tsx"],"names":[],"mappings":";AAAA,yDAAyD;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAQjD,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":["/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect } from \"react\";\r\nimport * as React from \"react\";\r\nimport { ClassNames } from \"./classNames\";\r\nimport styles from \"./MessageDialog.module.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"]}
+{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/MessageDialog.tsx"],"names":[],"mappings":";AAAA,yDAAyD;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAQjD,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,CAAC;YAChB,KAAK,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,IAAI,CAAC;IAChB,CAAC;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":["/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect } from \"react\";\r\nimport * as React from \"react\";\r\nimport { ClassNames } from \"./classNames\";\r\nimport styles from \"./MessageDialog.module.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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ToggleProps = {
     toggled: "on" | "mixed" | "off";
     onToggle?: () => void;

package/components/bars/CommandBarComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandBarComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandBarComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nimport { CommandButtonComponent } from \"./CommandButtonComponent\";\r\nimport { CommandDropdownComponent } from \"./CommandDropdownComponent\";\r\n\r\nimport hamburgerIcon from \"../../imgs/hamburgerIcon.svg\";\r\nimport pointerIcon from \"../../imgs/pointerIcon.svg\";\r\nimport handIcon from \"../../imgs/handIcon.svg\";\r\nimport zoomIcon from \"../../imgs/zoomIcon.svg\";\r\nimport logoIcon from \"../../imgs/babylonLogo.svg\";\r\nimport canvasFitIcon from \"../../imgs/canvasFitIcon.svg\";\r\nimport betaFlag from \"../../imgs/betaFlag.svg\";\r\n\r\nimport style from \"./CommandBar.module.scss\";\r\nimport { Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPickerLineComponent } from \"../lines/ColorPickerLineComponent\";\r\n\r\nexport interface ICommandBarComponentProps {\r\n    onSaveButtonClicked?: () => void;\r\n    onSaveToSnippetButtonClicked?: () => void;\r\n    onLoadFromSnippetButtonClicked?: () => void;\r\n    onHelpButtonClicked?: () => void;\r\n    onGiveFeedbackButtonClicked?: () => void;\r\n    onSelectButtonClicked?: () => void;\r\n    onPanButtonClicked?: () => void;\r\n    onZoomButtonClicked?: () => void;\r\n    onFitButtonClicked?: () => void;\r\n    onArtboardColorChanged?: (newColor: string) => void;\r\n    artboardColor?: string;\r\n    artboardColorPickerColor?: string;\r\n}\r\n\r\nexport const CommandBarComponent: FC<ICommandBarComponentProps> = (props) => {\r\n    return (\r\n        <div className={style.commandBar}>\r\n            <div className={style.commandsLeft}>\r\n                <div className={style.divider}>\r\n                    <img src={logoIcon} color=\"white\" className={\"active\"} draggable={false} />\r\n                    <CommandDropdownComponent\r\n                        //globalState={this.props.globalState}\r\n                        toRight={true}\r\n                        icon={hamburgerIcon}\r\n                        tooltip=\"Options\"\r\n                        items={[\r\n                            {\r\n                                label: \"Save\",\r\n                                onClick: () => {\r\n                                    props.onSaveButtonClicked && props.onSaveButtonClicked();\r\n                                },\r\n                            },\r\n                            {\r\n                                label: \"Load\",\r\n                                fileButton: true,\r\n                            },\r\n                            {\r\n                                label: \"Save to snippet\",\r\n                                onClick: () => {\r\n                                    props.onSaveToSnippetButtonClicked && props.onSaveToSnippetButtonClicked();\r\n                                },\r\n                            },\r\n                            {\r\n                                label: \"Load from snippet\",\r\n                                onClick: () => {\r\n                                    props.onLoadFromSnippetButtonClicked && props.onLoadFromSnippetButtonClicked();\r\n                                },\r\n                            },\r\n                            {\r\n                                label: \"Help\",\r\n                                onClick: () => {\r\n                                    props.onHelpButtonClicked && props.onHelpButtonClicked();\r\n                                },\r\n                            },\r\n                            {\r\n                                label: \"Give feedback\",\r\n                                onClick: () => {\r\n                                    props.onGiveFeedbackButtonClicked && props.onGiveFeedbackButtonClicked();\r\n                                },\r\n                            },\r\n                        ]}\r\n                    />\r\n                    <CommandButtonComponent\r\n                        tooltip=\"Select\"\r\n                        icon={pointerIcon}\r\n                        shortcut=\"S\"\r\n                        isActive={false}\r\n                        onClick={() => {\r\n                            props.onSelectButtonClicked && props.onSelectButtonClicked();\r\n                        }}\r\n                    />\r\n                    <CommandButtonComponent\r\n                        tooltip=\"Pan\"\r\n                        icon={handIcon}\r\n                        shortcut=\"P\"\r\n                        isActive={false}\r\n                        onClick={() => {\r\n                            props.onPanButtonClicked && props.onPanButtonClicked();\r\n                        }}\r\n                    />\r\n                    <CommandButtonComponent\r\n                        tooltip=\"Zoom\"\r\n                        shortcut=\"Z\"\r\n                        icon={zoomIcon}\r\n                        isActive={false}\r\n                        onClick={() => {\r\n                            props.onZoomButtonClicked && props.onZoomButtonClicked();\r\n                        }}\r\n                    />\r\n                </div>\r\n                <div className={style.divider}>\r\n                    <CommandButtonComponent\r\n                        tooltip=\"Fit to Window\"\r\n                        shortcut=\"F\"\r\n                        icon={canvasFitIcon}\r\n                        isActive={false}\r\n                        onClick={() => {\r\n                            props.onFitButtonClicked && props.onFitButtonClicked();\r\n                        }}\r\n                    />\r\n                </div>\r\n                <div className={JoinClassNames(style, \"divider\", \"padded\")}>\r\n                    <div style={{ paddingRight: \"5px\" }}>Artboard:</div>\r\n                    {props.onArtboardColorChanged && (\r\n                        <ColorPickerLineComponent\r\n                            backgroundColor={props.artboardColorPickerColor || \"#888888\"}\r\n                            value={props.artboardColor ? Color3.FromHexString(props.artboardColor) : new Color3(0, 0, 0)}\r\n                            onColorChanged={(newColor: string) => {\r\n                                if (props.onArtboardColorChanged) {\r\n                                    props.onArtboardColorChanged(newColor);\r\n                                }\r\n                            }}\r\n                        />\r\n                    )}\r\n                </div>\r\n                <div className={style.divider}>{props.children}</div>\r\n            </div>\r\n            <div className={style.commandsRight}>\r\n                <img src={betaFlag} className={style.betaFlag} draggable={false} />\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"CommandBarComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandBarComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nimport { CommandButtonComponent } from \"./CommandButtonComponent\";\r\nimport { CommandDropdownComponent } from \"./CommandDropdownComponent\";\r\n\r\nimport hamburgerIcon from \"../../imgs/hamburgerIcon.svg\";\r\nimport pointerIcon from \"../../imgs/pointerIcon.svg\";\r\nimport handIcon from \"../../imgs/handIcon.svg\";\r\nimport zoomIcon from \"../../imgs/zoomIcon.svg\";\r\nimport logoIcon from \"../../imgs/babylonLogo.svg\";\r\nimport canvasFitIcon from \"../../imgs/canvasFitIcon.svg\";\r\nimport betaFlag from \"../../imgs/betaFlag.svg\";\r\n\r\nimport style from \"./CommandBar.module.scss\";\r\nimport { Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPickerLineComponent } from \"../lines/ColorPickerLineComponent\";\r\n\r\nexport interface ICommandBarComponentProps {\r\n    onSaveButtonClicked?: () => void;\r\n    onSaveToSnippetButtonClicked?: () => void;\r\n    onLoadFromSnippetButtonClicked?: () => void;\r\n    onHelpButtonClicked?: () => void;\r\n    onGiveFeedbackButtonClicked?: () => void;\r\n    onSelectButtonClicked?: () => void;\r\n    onPanButtonClicked?: () => void;\r\n    onZoomButtonClicked?: () => void;\r\n    onFitButtonClicked?: () => void;\r\n    onArtboardColorChanged?: (newColor: string) => void;\r\n    artboardColor?: string;\r\n    artboardColorPickerColor?: string;\r\n}\r\n\r\nexport const CommandBarComponent: FC<ICommandBarComponentProps> = (props) => {\r\n    return (\r\n        <div className={style.commandBar}>\r\n            <div className={style.commandsLeft}>\r\n                <div className={style.divider}>\r\n                    <img src={logoIcon} color=\"white\" className={\"active\"} draggable={false} />\r\n                    <CommandDropdownComponent\r\n                        //globalState={this.props.globalState}\r\n                        toRight={true}\r\n                        icon={hamburgerIcon}\r\n                        tooltip=\"Options\"\r\n                        items={[\r\n                            {\r\n                                label: \"Save\",\r\n                                onClick: () => {\r\n                                    props.onSaveButtonClicked && props.onSaveButtonClicked();\r\n                                },\r\n                            },\r\n                            {\r\n                                label: \"Load\",\r\n                                fileButton: true,\r\n                            },\r\n                            {\r\n                                label: \"Save to snippet\",\r\n                                onClick: () => {\r\n                                    props.onSaveToSnippetButtonClicked && props.onSaveToSnippetButtonClicked();\r\n                                },\r\n                            },\r\n                            {\r\n                                label: \"Load from snippet\",\r\n                                onClick: () => {\r\n                                    props.onLoadFromSnippetButtonClicked && props.onLoadFromSnippetButtonClicked();\r\n                                },\r\n                            },\r\n                            {\r\n                                label: \"Help\",\r\n                                onClick: () => {\r\n                                    props.onHelpButtonClicked && props.onHelpButtonClicked();\r\n                                },\r\n                            },\r\n                            {\r\n                                label: \"Give feedback\",\r\n                                onClick: () => {\r\n                                    props.onGiveFeedbackButtonClicked && props.onGiveFeedbackButtonClicked();\r\n                                },\r\n                            },\r\n                        ]}\r\n                    />\r\n                    <CommandButtonComponent\r\n                        tooltip=\"Select\"\r\n                        icon={pointerIcon}\r\n                        shortcut=\"S\"\r\n                        isActive={false}\r\n                        onClick={() => {\r\n                            props.onSelectButtonClicked && props.onSelectButtonClicked();\r\n                        }}\r\n                    />\r\n                    <CommandButtonComponent\r\n                        tooltip=\"Pan\"\r\n                        icon={handIcon}\r\n                        shortcut=\"P\"\r\n                        isActive={false}\r\n                        onClick={() => {\r\n                            props.onPanButtonClicked && props.onPanButtonClicked();\r\n                        }}\r\n                    />\r\n                    <CommandButtonComponent\r\n                        tooltip=\"Zoom\"\r\n                        shortcut=\"Z\"\r\n                        icon={zoomIcon}\r\n                        isActive={false}\r\n                        onClick={() => {\r\n                            props.onZoomButtonClicked && props.onZoomButtonClicked();\r\n                        }}\r\n                    />\r\n                </div>\r\n                <div className={style.divider}>\r\n                    <CommandButtonComponent\r\n                        tooltip=\"Fit to Window\"\r\n                        shortcut=\"F\"\r\n                        icon={canvasFitIcon}\r\n                        isActive={false}\r\n                        onClick={() => {\r\n                            props.onFitButtonClicked && props.onFitButtonClicked();\r\n                        }}\r\n                    />\r\n                </div>\r\n                <div className={JoinClassNames(style, \"divider\", \"padded\")}>\r\n                    <div style={{ paddingRight: \"5px\" }}>Artboard:</div>\r\n                    {props.onArtboardColorChanged && (\r\n                        <ColorPickerLineComponent\r\n                            backgroundColor={props.artboardColorPickerColor || \"#888888\"}\r\n                            value={props.artboardColor ? Color3.FromHexString(props.artboardColor) : new Color3(0, 0, 0)}\r\n                            onColorChanged={(newColor: string) => {\r\n                                if (props.onArtboardColorChanged) {\r\n                                    props.onArtboardColorChanged(newColor);\r\n                                }\r\n                            }}\r\n                        />\r\n                    )}\r\n                </div>\r\n                <div className={style.divider}>{props.children}</div>\r\n            </div>\r\n            <div className={style.commandsRight}>\r\n                <img src={betaFlag} className={style.betaFlag} draggable={false} />\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/bars/CommandDropdownComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDropdownComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandDropdownComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { FileButtonLineComponent } from \"../lines/FileButtonLineComponent\";\r\nimport { JoinClassNames } from \"../classNames\";\r\n\r\nimport style from \"./CommandDropdown.module.scss\";\r\n\r\ninterface ICommandDropdownComponentProps {\r\n    icon?: string;\r\n    tooltip: string;\r\n    defaultValue?: string;\r\n    items: {\r\n        label: string;\r\n        icon?: string;\r\n        fileButton?: boolean;\r\n        onClick?: () => void;\r\n        onCheck?: (value: boolean) => void;\r\n        storeKey?: string;\r\n        isActive?: boolean;\r\n        defaultValue?: boolean | string;\r\n        subItems?: string[];\r\n    }[];\r\n    toRight?: boolean;\r\n}\r\n\r\nexport class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, { isExpanded: boolean; activeState: string }> {\r\n    public constructor(props: ICommandDropdownComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, activeState: \"\" };\r\n    }\r\n\r\n    public override render() {\r\n        return (\r\n            <>\r\n                {this.state.isExpanded && (\r\n                    <div\r\n                        className={style.commandDropdownBlocker}\r\n                        onClick={() => {\r\n                            this.setState({ isExpanded: false });\r\n                        }}\r\n                    ></div>\r\n                )}\r\n                <div className={style.commandDropdownRoot}>\r\n                    <div\r\n                        className={JoinClassNames(style, \"commandDropdown\", this.state.isExpanded ? \"activated\" : \"\")}\r\n                        title={this.props.tooltip}\r\n                        onClick={() => {\r\n                            this.setState({ isExpanded: false });\r\n                            const newState = !this.state.isExpanded;\r\n                            const pgHost = document.getElementById(\"embed-host\");\r\n\r\n                            if (pgHost) {\r\n                                pgHost.style.zIndex = newState ? \"0\" : \"10\";\r\n                            }\r\n\r\n                            this.setState({ isExpanded: newState });\r\n                        }}\r\n                    >\r\n                        {this.props.icon && (\r\n                            <div className={style.commandDropdownIcon}>\r\n                                <img src={this.props.icon} />\r\n                            </div>\r\n                        )}\r\n                        {!this.props.icon && <div className={style.commandDropdownActive}></div>}\r\n                    </div>\r\n                    {this.state.isExpanded && (\r\n                        <div className={JoinClassNames(style, \"commandDropdownContent\", this.props.toRight ? \"toRight\" : \"\")}>\r\n                            {this.props.items.map((m) => {\r\n                                if (!m.fileButton) {\r\n                                    return (\r\n                                        <div\r\n                                            className={JoinClassNames(style, \"commandDropdownLabel\", m.isActive ? \"active\" : \"\")}\r\n                                            key={m.label}\r\n                                            onClick={() => {\r\n                                                if (!m.onClick) {\r\n                                                    this.forceUpdate();\r\n                                                    return;\r\n                                                }\r\n                                                if (!m.subItems) {\r\n                                                    m.onClick();\r\n\r\n                                                    this.setState({ isExpanded: false, activeState: m.label });\r\n                                                }\r\n                                            }}\r\n                                            title={m.label}\r\n                                        >\r\n                                            {!m.icon && <div className={style.commandDropdownLabelText}>{(m.isActive ? \"> \" : \"\") + m.label}</div>}\r\n                                            {m.icon && (\r\n                                                <div className={style.commandDropdownIcon}>\r\n                                                    <img src={m.icon} />\r\n                                                </div>\r\n                                            )}\r\n                                            {m.onCheck && (\r\n                                                <input\r\n                                                    type=\"checkBox\"\r\n                                                    className={style.commandDropdownLabelCheck}\r\n                                                    onChange={(evt) => {\r\n                                                        this.forceUpdate();\r\n                                                        m.onCheck!(evt.target.checked);\r\n                                                    }}\r\n                                                    checked={false}\r\n                                                />\r\n                                            )}\r\n                                            {m.subItems && <div className={style.commandDropdownArrow}>{\">\"}</div>}\r\n                                            {m.subItems && (\r\n                                                <div className={style.subItems}>\r\n                                                    {m.subItems.map((s) => {\r\n                                                        return (\r\n                                                            <div\r\n                                                                key={s}\r\n                                                                className={style.subItem}\r\n                                                                onClick={() => {\r\n                                                                    m.onClick!();\r\n                                                                    this.setState({ isExpanded: false });\r\n                                                                }}\r\n                                                            >\r\n                                                                <div>{s}</div>\r\n                                                            </div>\r\n                                                        );\r\n                                                    })}\r\n                                                </div>\r\n                                            )}\r\n                                        </div>\r\n                                    );\r\n                                } else {\r\n                                    // eslint-disable-next-line no-console\r\n                                    return <FileButtonLineComponent key={m.label} label=\"Load\" onClick={(file) => console.log(\"file btn clicked\")} accept=\".json\" />;\r\n                                }\r\n                            })}\r\n                        </div>\r\n                    )}\r\n                </div>\r\n            </>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"CommandDropdownComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandDropdownComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { FileButtonLineComponent } from \"../lines/FileButtonLineComponent\";\r\nimport { JoinClassNames } from \"../classNames\";\r\n\r\nimport style from \"./CommandDropdown.module.scss\";\r\n\r\ninterface ICommandDropdownComponentProps {\r\n    icon?: string;\r\n    tooltip: string;\r\n    defaultValue?: string;\r\n    items: {\r\n        label: string;\r\n        icon?: string;\r\n        fileButton?: boolean;\r\n        onClick?: () => void;\r\n        onCheck?: (value: boolean) => void;\r\n        storeKey?: string;\r\n        isActive?: boolean;\r\n        defaultValue?: boolean | string;\r\n        subItems?: string[];\r\n    }[];\r\n    toRight?: boolean;\r\n}\r\n\r\nexport class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, { isExpanded: boolean; activeState: string }> {\r\n    public constructor(props: ICommandDropdownComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, activeState: \"\" };\r\n    }\r\n\r\n    public override render() {\r\n        return (\r\n            <>\r\n                {this.state.isExpanded && (\r\n                    <div\r\n                        className={style.commandDropdownBlocker}\r\n                        onClick={() => {\r\n                            this.setState({ isExpanded: false });\r\n                        }}\r\n                    ></div>\r\n                )}\r\n                <div className={style.commandDropdownRoot}>\r\n                    <div\r\n                        className={JoinClassNames(style, \"commandDropdown\", this.state.isExpanded ? \"activated\" : \"\")}\r\n                        title={this.props.tooltip}\r\n                        onClick={() => {\r\n                            this.setState({ isExpanded: false });\r\n                            const newState = !this.state.isExpanded;\r\n                            const pgHost = document.getElementById(\"embed-host\");\r\n\r\n                            if (pgHost) {\r\n                                pgHost.style.zIndex = newState ? \"0\" : \"10\";\r\n                            }\r\n\r\n                            this.setState({ isExpanded: newState });\r\n                        }}\r\n                    >\r\n                        {this.props.icon && (\r\n                            <div className={style.commandDropdownIcon}>\r\n                                <img src={this.props.icon} />\r\n                            </div>\r\n                        )}\r\n                        {!this.props.icon && <div className={style.commandDropdownActive}></div>}\r\n                    </div>\r\n                    {this.state.isExpanded && (\r\n                        <div className={JoinClassNames(style, \"commandDropdownContent\", this.props.toRight ? \"toRight\" : \"\")}>\r\n                            {this.props.items.map((m) => {\r\n                                if (!m.fileButton) {\r\n                                    return (\r\n                                        <div\r\n                                            className={JoinClassNames(style, \"commandDropdownLabel\", m.isActive ? \"active\" : \"\")}\r\n                                            key={m.label}\r\n                                            onClick={() => {\r\n                                                if (!m.onClick) {\r\n                                                    this.forceUpdate();\r\n                                                    return;\r\n                                                }\r\n                                                if (!m.subItems) {\r\n                                                    m.onClick();\r\n\r\n                                                    this.setState({ isExpanded: false, activeState: m.label });\r\n                                                }\r\n                                            }}\r\n                                            title={m.label}\r\n                                        >\r\n                                            {!m.icon && <div className={style.commandDropdownLabelText}>{(m.isActive ? \"> \" : \"\") + m.label}</div>}\r\n                                            {m.icon && (\r\n                                                <div className={style.commandDropdownIcon}>\r\n                                                    <img src={m.icon} />\r\n                                                </div>\r\n                                            )}\r\n                                            {m.onCheck && (\r\n                                                <input\r\n                                                    type=\"checkBox\"\r\n                                                    className={style.commandDropdownLabelCheck}\r\n                                                    onChange={(evt) => {\r\n                                                        this.forceUpdate();\r\n                                                        m.onCheck!(evt.target.checked);\r\n                                                    }}\r\n                                                    checked={false}\r\n                                                />\r\n                                            )}\r\n                                            {m.subItems && <div className={style.commandDropdownArrow}>{\">\"}</div>}\r\n                                            {m.subItems && (\r\n                                                <div className={style.subItems}>\r\n                                                    {m.subItems.map((s) => {\r\n                                                        return (\r\n                                                            <div\r\n                                                                key={s}\r\n                                                                className={style.subItem}\r\n                                                                onClick={() => {\r\n                                                                    m.onClick!();\r\n                                                                    this.setState({ isExpanded: false });\r\n                                                                }}\r\n                                                            >\r\n                                                                <div>{s}</div>\r\n                                                            </div>\r\n                                                        );\r\n                                                    })}\r\n                                                </div>\r\n                                            )}\r\n                                        </div>\r\n                                    );\r\n                                } else {\r\n                                    // eslint-disable-next-line no-console\r\n                                    return <FileButtonLineComponent key={m.label} label=\"Load\" onClick={(file) => console.log(\"file btn clicked\")} accept=\".json\" />;\r\n                                }\r\n                            })}\r\n                        </div>\r\n                    )}\r\n                </div>\r\n            </>\r\n        );\r\n    }\r\n}\r\n"]}

package/components/classNames.js.map

@@ -1 +1 @@
-{"version":3,"file":"classNames.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/classNames.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAC,KAAU,EAAE,WAAgB;IACnD,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACtB,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE;YACb,MAAM,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;SACrC;KACJ;IACD,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,WAAgB,EAAE,GAAG,KAAe;IAC/D,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACtB,IAAI,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE;YAC3B,MAAM,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;SACrC;KACJ;IACD,OAAO,MAAM,CAAC;AAClB,CAAC","sourcesContent":["export function ClassNames(names: any, styleObject: any) {\r\n    let string = \"\";\r\n    for (const name in names) {\r\n        if (names[name]) {\r\n            string += styleObject[name] + \" \";\r\n        }\r\n    }\r\n    return string;\r\n}\r\n\r\nexport function JoinClassNames(styleObject: any, ...names: string[]) {\r\n    let string = \"\";\r\n    for (const name of names) {\r\n        if (name && styleObject[name]) {\r\n            string += styleObject[name] + \" \";\r\n        }\r\n    }\r\n    return string;\r\n}\r\n"]}
+{"version":3,"file":"classNames.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/classNames.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAC,KAAU,EAAE,WAAgB;IACnD,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACvB,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;YACd,MAAM,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;QACtC,CAAC;IACL,CAAC;IACD,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,WAAgB,EAAE,GAAG,KAAe;IAC/D,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACvB,IAAI,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;YAC5B,MAAM,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;QACtC,CAAC;IACL,CAAC;IACD,OAAO,MAAM,CAAC;AAClB,CAAC","sourcesContent":["export function ClassNames(names: any, styleObject: any) {\r\n    let string = \"\";\r\n    for (const name in names) {\r\n        if (names[name]) {\r\n            string += styleObject[name] + \" \";\r\n        }\r\n    }\r\n    return string;\r\n}\r\n\r\nexport function JoinClassNames(styleObject: any, ...names: string[]) {\r\n    let string = \"\";\r\n    for (const name of names) {\r\n        if (name && styleObject[name]) {\r\n            string += styleObject[name] + \" \";\r\n        }\r\n    }\r\n    return string;\r\n}\r\n"]}

package/components/colorPicker/ColorComponentEntry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorComponentEntry.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorComponentEntry.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,mCAAmC,CAAC;AAYtD,MAAM,OAAO,4BAA6B,SAAQ,KAAK,CAAC,SAAoC;IACxF,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;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,oBAAoB,aACtC,cAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,YAC3C,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,EAAE,KAAK,CAAC,yBAAyB,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAO,IACvE,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorComponentEntry.module.scss\";\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 ColorComponentComponentEntry 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 override render() {\r\n        return (\r\n            <div className={style.colorPickerComponent}>\r\n                <div className={style.colorPickerComponentValue}>\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={style.colorPickerComponentLabel}>{this.props.label}</div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"ColorComponentEntry.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorComponentEntry.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,mCAAmC,CAAC;AAYtD,MAAM,OAAO,4BAA6B,SAAQ,KAAK,CAAC,SAAoC;IACxF,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,WAAW,CAAC,WAAmB;QAC3B,IAAI,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC,OAAO;QACX,CAAC;QAED,IAAI,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE1C,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YACvB,OAAO;QACX,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;YAChE,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;YAChE,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;QACtC,CAAC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;QACvC,CAAC;IACL,CAAC;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,oBAAoB,aACtC,cAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,YAC3C,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,EAAE,KAAK,CAAC,yBAAyB,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAO,IACvE,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorComponentEntry.module.scss\";\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 ColorComponentComponentEntry 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 override render() {\r\n        return (\r\n            <div className={style.colorPickerComponent}>\r\n                <div className={style.colorPickerComponentValue}>\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={style.colorPickerComponentLabel}>{this.props.label}</div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/components/colorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/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 { ColorComponentComponentEntry } from \"./ColorComponentEntry\";\r\nimport { HexColorComponent } from \"./HexColor\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\n\r\nimport style from \"./ColorPicker.module.scss\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\n/**\r\n * Interface used to specify creation options for color picker\r\n */\r\nexport interface IColorPickerComponentProps {\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    backgroundColor?: string;\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 ColorPickerComponent extends React.Component<IColorPickerComponentProps, 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: IColorPickerComponentProps) {\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    override shouldComponentUpdate(nextProps: IColorPickerComponentProps, 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            Logger.Log(\"Saturation: \" + saturation);\r\n            Logger.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            Logger.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    override 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 override 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\r\n                className={ClassNames({ colorPickerContainer: true, withHints: this.props.linearhint }, style)}\r\n                style={{ backgroundColor: this.props.backgroundColor || \"inherit\" }}\r\n            >\r\n                <div\r\n                    className={style.colorPickerSaturation}\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={style.colorPickerSaturationWhite}></div>\r\n                    <div className={style.colorPickerSaturationBlack}></div>\r\n                    <div\r\n                        className={style.colorPickerSaturationCursor}\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={style.colorPickerHue}>\r\n                    <div\r\n                        className={style.colorPickerHueColor}\r\n                        style={{\r\n                            background: colorHex,\r\n                        }}\r\n                    ></div>\r\n                    <div\r\n                        className={style.colorPickerHueSlider}\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={style.colorPickerHueCursor}\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={style.colorPickerRgb}>\r\n                    <div className={style.red}>\r\n                        <ColorComponentComponentEntry\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={style.green}>\r\n                        <ColorComponentComponentEntry\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={style.blue}>\r\n                        <ColorComponentComponentEntry\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={ClassNames({ alpha: true, grayed: hasAlpha }, style)}>\r\n                        <ColorComponentComponentEntry\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                <HexColorComponent\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                {this.props.linearhint && (\r\n                    <div className={style.colorPickerWarning}>\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"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/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 { ColorComponentComponentEntry } from \"./ColorComponentEntry\";\r\nimport { HexColorComponent } from \"./HexColor\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\n\r\nimport style from \"./ColorPicker.module.scss\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\n/**\r\n * Interface used to specify creation options for color picker\r\n */\r\nexport interface IColorPickerComponentProps {\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    backgroundColor?: string;\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 ColorPickerComponent extends React.Component<IColorPickerComponentProps, 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: IColorPickerComponentProps) {\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    override shouldComponentUpdate(nextProps: IColorPickerComponentProps, 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            Logger.Log(\"Saturation: \" + saturation);\r\n            Logger.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            Logger.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    override 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 override 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\r\n                className={ClassNames({ colorPickerContainer: true, withHints: this.props.linearhint }, style)}\r\n                style={{ backgroundColor: this.props.backgroundColor || \"inherit\" }}\r\n            >\r\n                <div\r\n                    className={style.colorPickerSaturation}\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={style.colorPickerSaturationWhite}></div>\r\n                    <div className={style.colorPickerSaturationBlack}></div>\r\n                    <div\r\n                        className={style.colorPickerSaturationCursor}\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={style.colorPickerHue}>\r\n                    <div\r\n                        className={style.colorPickerHueColor}\r\n                        style={{\r\n                            background: colorHex,\r\n                        }}\r\n                    ></div>\r\n                    <div\r\n                        className={style.colorPickerHueSlider}\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={style.colorPickerHueCursor}\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={style.colorPickerRgb}>\r\n                    <div className={style.red}>\r\n                        <ColorComponentComponentEntry\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={style.green}>\r\n                        <ColorComponentComponentEntry\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={style.blue}>\r\n                        <ColorComponentComponentEntry\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={ClassNames({ alpha: true, grayed: hasAlpha }, style)}>\r\n                        <ColorComponentComponentEntry\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                <HexColorComponent\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                {this.props.linearhint && (\r\n                    <div className={style.colorPickerWarning}>\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/components/colorPicker/HexColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"HexColor.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/HexColor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAS3C,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAA0C;IACnF,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;IAEQ,qBAAqB,CAAC,SAAyB,EAAE,SAA0B;QAChF,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;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,cAAc,aAChC,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,oBAAW,EACpD,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,YACrC,gBACI,IAAI,EAAC,QAAQ;wBACb,wBAAwB;wBACxB,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,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,GACA,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./HexColor.module.scss\";\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 HexColorComponent 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    override 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 override render() {\r\n        return (\r\n            <div className={style.colorPickerHex}>\r\n                <div className={style.colorPickerHexLabel}>Hex</div>\r\n                <div className={style.colorPickerHexValue}>\r\n                    <input\r\n                        type=\"string\"\r\n                        // className=\"hex-input\"\r\n                        className={style.colorPickerHex}\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                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"HexColor.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/HexColor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAS3C,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAA0C;IACnF,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;IAEQ,qBAAqB,CAAC,SAAyB,EAAE,SAA0B;QAChF,IAAI,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACvC,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrD,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;QACtC,CAAC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;QACvC,CAAC;IACL,CAAC;IAED,cAAc,CAAC,WAAmB;QAC9B,IAAI,WAAW,IAAI,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,EAAE,CAAC;YACpE,OAAO;QACX,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC,CAAC;QAEpC,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YACnD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC9D,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACJ,OAAO;YACX,CAAC;QACL,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC;IAC3C,CAAC;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,cAAc,aAChC,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,oBAAW,EACpD,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,YACrC,gBACI,IAAI,EAAC,QAAQ;wBACb,wBAAwB;wBACxB,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,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,GACA,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./HexColor.module.scss\";\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 HexColorComponent 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    override 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 override render() {\r\n        return (\r\n            <div className={style.colorPickerHex}>\r\n                <div className={style.colorPickerHexLabel}>Hex</div>\r\n                <div className={style.colorPickerHexValue}>\r\n                    <input\r\n                        type=\"string\"\r\n                        // className=\"hex-input\"\r\n                        className={style.colorPickerHex}\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                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/components/layout/FlexibleDragHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleDragHandler.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDragHandler.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext, useRef } from \"react\";\r\nimport { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { LayoutTabsRow, LayoutColumn } from \"./types\";\r\nimport { addPercentageStringToNumber, getPosInLayout } from \"./utils\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport type { ResizeItem } from \"./FlexibleResizeBar\";\r\n\r\n/**\r\n * Arguments for the DragHandler component.\r\n */\r\nexport interface IFlexibleDragHandlerProps {\r\n    /**\r\n     * The size of the containing element. Used to calculate the percentage of\r\n     * space occupied by the component\r\n     */\r\n    containerSize: { width: number; height: number };\r\n}\r\n\r\n/**\r\n * This component receives the drop events and updates the layout accordingly\r\n * @param props properties\r\n * @returns DragHandler element\r\n */\r\nexport const FlexibleDragHandler: FC<IFlexibleDragHandlerProps> = (props) => {\r\n    const { layout, setLayout } = useContext(LayoutContext);\r\n    // CLICK/DRAG INFORMATION\r\n    const pointerPos = useRef<Nullable<Vector2>>(null);\r\n    const [_, drop] = useDrop(() => ({\r\n        accept: [ElementTypes.RESIZE_BAR],\r\n        hover(item, monitor) {\r\n            const anyitem = item as ResizeItem;\r\n\r\n            const xy = monitor.getClientOffset();\r\n            const pos = new Vector2(xy!.x, xy!.y);\r\n            if (pointerPos.current) {\r\n                if (monitor.getItemType() === ElementTypes.RESIZE_BAR) {\r\n                    onResize(anyitem.rowNumber, anyitem.columnNumber, pos, pointerPos.current, anyitem.direction);\r\n                }\r\n            }\r\n            pointerPos.current = pos;\r\n        },\r\n        drop(item, monitor) {\r\n            pointerPos.current = null;\r\n        },\r\n    }));\r\n\r\n    const getLayoutProperty = (layout: LayoutColumn | LayoutTabsRow, property: \"width\" | \"height\") => {\r\n        if (property === \"width\") {\r\n            return (layout as LayoutColumn)[property];\r\n        } else {\r\n            return (layout as LayoutTabsRow)[property];\r\n        }\r\n    };\r\n\r\n    const setLayoutProperty = (layout: LayoutColumn | LayoutTabsRow, property: \"width\" | \"height\", value: string) => {\r\n        if (property === \"width\") {\r\n            (layout as LayoutColumn)[property] = value;\r\n        } else {\r\n            (layout as LayoutTabsRow)[property] = value;\r\n        }\r\n    };\r\n\r\n    const processResize = (\r\n        pos: Vector2,\r\n        prevPos: Vector2,\r\n        row0: number | undefined,\r\n        column0: number,\r\n        row1: number | undefined,\r\n        column1: number,\r\n        axis: \"x\" | \"y\",\r\n        maxAxisValue: number,\r\n        property: \"width\" | \"height\",\r\n        minFinalValue: number\r\n    ) => {\r\n        // Check axis difference\r\n        const axisDiff = pos[axis] - prevPos[axis];\r\n\r\n        try {\r\n            // Get layout rows\r\n            const layoutElement0 = getPosInLayout(layout, column0, row0);\r\n            const layoutElement1 = getPosInLayout(layout, column1, row1);\r\n\r\n            if (layoutElement0 && layoutElement1) {\r\n                const percDiff = (axisDiff / maxAxisValue) * 100;\r\n\r\n                const newValue0 = addPercentageStringToNumber(getLayoutProperty(layoutElement0, property), percDiff);\r\n                const newValue1 = addPercentageStringToNumber(getLayoutProperty(layoutElement1, property), -percDiff);\r\n\r\n                if (newValue0 >= minFinalValue && newValue1 >= minFinalValue) {\r\n                    setLayoutProperty(layoutElement0, property, newValue0.toFixed(2) + \"%\");\r\n                    setLayoutProperty(layoutElement1, property, newValue1.toFixed(2) + \"%\");\r\n                }\r\n\r\n                setLayout({ ...layout });\r\n            }\r\n        } catch (e) {\r\n            // If an error occurred, we're trying to resize something invalid, so don't do anything\r\n            return;\r\n        }\r\n    };\r\n\r\n    const processResizeRow = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n        processResize(pos, prevPos, args.row, args.column, args.row + 1, args.column, \"y\", props.containerSize.height, \"height\", 5);\r\n    };\r\n\r\n    const processResizeColumn = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n        processResize(pos, prevPos, undefined, args.column, undefined, args.column + 1, \"x\", props.containerSize.width, \"width\", 5);\r\n    };\r\n\r\n    const onResize = (row: number, column: number, pos: Vector2, prevPos: Vector2, type: \"row\" | \"column\") => {\r\n        if (type === \"row\") {\r\n            processResizeRow(pos, prevPos, { row, column });\r\n        } else {\r\n            processResizeColumn(pos, prevPos, { row, column });\r\n        }\r\n        pointerPos.current = pos;\r\n    };\r\n\r\n    return (\r\n        <div ref={drop} style={{ width: \"100%\", height: \"100%\" }}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"FlexibleDragHandler.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDragHandler.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext, useRef } from \"react\";\r\nimport { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { LayoutTabsRow, LayoutColumn } from \"./types\";\r\nimport { addPercentageStringToNumber, getPosInLayout } from \"./utils\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport type { ResizeItem } from \"./FlexibleResizeBar\";\r\n\r\n/**\r\n * Arguments for the DragHandler component.\r\n */\r\nexport interface IFlexibleDragHandlerProps {\r\n    /**\r\n     * The size of the containing element. Used to calculate the percentage of\r\n     * space occupied by the component\r\n     */\r\n    containerSize: { width: number; height: number };\r\n}\r\n\r\n/**\r\n * This component receives the drop events and updates the layout accordingly\r\n * @param props properties\r\n * @returns DragHandler element\r\n */\r\nexport const FlexibleDragHandler: FC<IFlexibleDragHandlerProps> = (props) => {\r\n    const { layout, setLayout } = useContext(LayoutContext);\r\n    // CLICK/DRAG INFORMATION\r\n    const pointerPos = useRef<Nullable<Vector2>>(null);\r\n    const [_, drop] = useDrop(() => ({\r\n        accept: [ElementTypes.RESIZE_BAR],\r\n        hover(item, monitor) {\r\n            const anyitem = item as ResizeItem;\r\n\r\n            const xy = monitor.getClientOffset();\r\n            const pos = new Vector2(xy!.x, xy!.y);\r\n            if (pointerPos.current) {\r\n                if (monitor.getItemType() === ElementTypes.RESIZE_BAR) {\r\n                    onResize(anyitem.rowNumber, anyitem.columnNumber, pos, pointerPos.current, anyitem.direction);\r\n                }\r\n            }\r\n            pointerPos.current = pos;\r\n        },\r\n        drop(item, monitor) {\r\n            pointerPos.current = null;\r\n        },\r\n    }));\r\n\r\n    const getLayoutProperty = (layout: LayoutColumn | LayoutTabsRow, property: \"width\" | \"height\") => {\r\n        if (property === \"width\") {\r\n            return (layout as LayoutColumn)[property];\r\n        } else {\r\n            return (layout as LayoutTabsRow)[property];\r\n        }\r\n    };\r\n\r\n    const setLayoutProperty = (layout: LayoutColumn | LayoutTabsRow, property: \"width\" | \"height\", value: string) => {\r\n        if (property === \"width\") {\r\n            (layout as LayoutColumn)[property] = value;\r\n        } else {\r\n            (layout as LayoutTabsRow)[property] = value;\r\n        }\r\n    };\r\n\r\n    const processResize = (\r\n        pos: Vector2,\r\n        prevPos: Vector2,\r\n        row0: number | undefined,\r\n        column0: number,\r\n        row1: number | undefined,\r\n        column1: number,\r\n        axis: \"x\" | \"y\",\r\n        maxAxisValue: number,\r\n        property: \"width\" | \"height\",\r\n        minFinalValue: number\r\n    ) => {\r\n        // Check axis difference\r\n        const axisDiff = pos[axis] - prevPos[axis];\r\n\r\n        try {\r\n            // Get layout rows\r\n            const layoutElement0 = getPosInLayout(layout, column0, row0);\r\n            const layoutElement1 = getPosInLayout(layout, column1, row1);\r\n\r\n            if (layoutElement0 && layoutElement1) {\r\n                const percDiff = (axisDiff / maxAxisValue) * 100;\r\n\r\n                const newValue0 = addPercentageStringToNumber(getLayoutProperty(layoutElement0, property), percDiff);\r\n                const newValue1 = addPercentageStringToNumber(getLayoutProperty(layoutElement1, property), -percDiff);\r\n\r\n                if (newValue0 >= minFinalValue && newValue1 >= minFinalValue) {\r\n                    setLayoutProperty(layoutElement0, property, newValue0.toFixed(2) + \"%\");\r\n                    setLayoutProperty(layoutElement1, property, newValue1.toFixed(2) + \"%\");\r\n                }\r\n\r\n                setLayout({ ...layout });\r\n            }\r\n        } catch (e) {\r\n            // If an error occurred, we're trying to resize something invalid, so don't do anything\r\n            return;\r\n        }\r\n    };\r\n\r\n    const processResizeRow = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n        processResize(pos, prevPos, args.row, args.column, args.row + 1, args.column, \"y\", props.containerSize.height, \"height\", 5);\r\n    };\r\n\r\n    const processResizeColumn = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n        processResize(pos, prevPos, undefined, args.column, undefined, args.column + 1, \"x\", props.containerSize.width, \"width\", 5);\r\n    };\r\n\r\n    const onResize = (row: number, column: number, pos: Vector2, prevPos: Vector2, type: \"row\" | \"column\") => {\r\n        if (type === \"row\") {\r\n            processResizeRow(pos, prevPos, { row, column });\r\n        } else {\r\n            processResizeColumn(pos, prevPos, { row, column });\r\n        }\r\n        pointerPos.current = pos;\r\n    };\r\n\r\n    return (\r\n        <div ref={drop} style={{ width: \"100%\", height: \"100%\" }}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleGridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleGridLayout.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAahE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,YAAY,CAAC,OAAO,EAAE;YACtB,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;YAC/D,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC;SACpE;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,YACpE,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAChD,KAAC,mBAAmB,IAAC,aAAa,EAAE,aAAa,CAAC,OAAO,YACrD,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,YAAY,YAC5D,KAAC,qBAAqB,KAAG,GACvB,GACY,GACD,GACf,CACjB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useRef, useEffect, useState } from \"react\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { DndProvider } from \"react-dnd\";\r\nimport { TouchBackend } from \"react-dnd-touch-backend\";\r\nimport { FlexibleDragHandler } from \"./FlexibleDragHandler\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleGridContainer } from \"./FlexibleGridContainer\";\r\nimport type { Layout } from \"./types\";\r\n\r\n/**\r\n * Arguments for the Layout component.\r\n */\r\nexport interface IFlexibleGridLayoutProps {\r\n    /**\r\n     * A definition of the layout which can be changed by the user\r\n     */\r\n    layoutDefinition: Layout;\r\n}\r\n\r\n/**\r\n * This component represents a grid layout that can be resized and rearranged\r\n * by the user.\r\n * @param props properties\r\n * @returns layout element\r\n */\r\nexport const FlexibleGridLayout: FC<IFlexibleGridLayoutProps> = (props) => {\r\n    const [layout, setLayout] = useState(props.layoutDefinition);\r\n    const containerDiv = useRef<Nullable<HTMLDivElement>>(null);\r\n    const containerSize = useRef({ width: 0, height: 0 });\r\n\r\n    useEffect(() => {\r\n        if (containerDiv.current) {\r\n            containerSize.current.width = containerDiv.current.clientWidth;\r\n            containerSize.current.height = containerDiv.current.clientHeight;\r\n        }\r\n    }, [containerDiv]);\r\n\r\n    return (\r\n        <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>\r\n            <LayoutContext.Provider value={{ layout, setLayout }}>\r\n                <FlexibleDragHandler containerSize={containerSize.current}>\r\n                    <div style={{ width: \"100%\", height: \"100%\" }} ref={containerDiv}>\r\n                        <FlexibleGridContainer />\r\n                    </div>\r\n                </FlexibleDragHandler>\r\n            </LayoutContext.Provider>\r\n        </DndProvider>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"FlexibleGridLayout.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAahE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACvB,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;YAC/D,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC;QACrE,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,YACpE,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAChD,KAAC,mBAAmB,IAAC,aAAa,EAAE,aAAa,CAAC,OAAO,YACrD,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,YAAY,YAC5D,KAAC,qBAAqB,KAAG,GACvB,GACY,GACD,GACf,CACjB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useRef, useEffect, useState } from \"react\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { DndProvider } from \"react-dnd\";\r\nimport { TouchBackend } from \"react-dnd-touch-backend\";\r\nimport { FlexibleDragHandler } from \"./FlexibleDragHandler\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleGridContainer } from \"./FlexibleGridContainer\";\r\nimport type { Layout } from \"./types\";\r\n\r\n/**\r\n * Arguments for the Layout component.\r\n */\r\nexport interface IFlexibleGridLayoutProps {\r\n    /**\r\n     * A definition of the layout which can be changed by the user\r\n     */\r\n    layoutDefinition: Layout;\r\n}\r\n\r\n/**\r\n * This component represents a grid layout that can be resized and rearranged\r\n * by the user.\r\n * @param props properties\r\n * @returns layout element\r\n */\r\nexport const FlexibleGridLayout: FC<IFlexibleGridLayoutProps> = (props) => {\r\n    const [layout, setLayout] = useState(props.layoutDefinition);\r\n    const containerDiv = useRef<Nullable<HTMLDivElement>>(null);\r\n    const containerSize = useRef({ width: 0, height: 0 });\r\n\r\n    useEffect(() => {\r\n        if (containerDiv.current) {\r\n            containerSize.current.width = containerDiv.current.clientWidth;\r\n            containerSize.current.height = containerDiv.current.clientHeight;\r\n        }\r\n    }, [containerDiv]);\r\n\r\n    return (\r\n        <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>\r\n            <LayoutContext.Provider value={{ layout, setLayout }}>\r\n                <FlexibleDragHandler containerSize={containerSize.current}>\r\n                    <div style={{ width: \"100%\", height: \"100%\" }} ref={containerDiv}>\r\n                        <FlexibleGridContainer />\r\n                    </div>\r\n                </FlexibleDragHandler>\r\n            </LayoutContext.Provider>\r\n        </DndProvider>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleTabsContainer.js.map

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

package/components/layout/LayoutContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Layout } from "./types";
 export declare const LayoutContext: import("react").Context<{
     /**