@babylonjs/shared-ui-components 8.7.0 → 8.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -112,7 +112,7 @@ export class ColorPicker extends React.Component {
|
|
|
112
112
|
} }), _jsx("div", { className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: _jsx("div", { className: "color-picker-hue-cursor", style: {
|
|
113
113
|
left: `${(hsv.r / 360.0) * 100}%`,
|
|
114
114
|
border: `1px solid ` + colorHexRef,
|
|
115
|
-
} }) })] }),
|
|
115
|
+
} }) })] }), _jsxs("div", { className: "color-picker-rgb", children: [_jsx("div", { className: "red", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
|
|
116
116
|
this.state.color.r = value / 255.0;
|
|
117
117
|
this.forceUpdate();
|
|
118
118
|
} }) }), _jsx("div", { className: "green", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
|
|
@@ -124,15 +124,23 @@ export class ColorPicker extends React.Component {
|
|
|
124
124
|
} }) }), _jsx("div", { className: "alpha" + (hasAlpha ? "" : " grayed"), children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
|
|
125
125
|
this.setState({ alpha: value / 255.0 });
|
|
126
126
|
this.forceUpdate();
|
|
127
|
-
} }) })] }), _jsxs("div", { className: "color-picker-hex", children: [_jsx("div", { className: "color-picker-hex-label", children: "Hex" }), _jsx("div", { className: "color-picker-hex-value", children: _jsx(HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
127
|
+
} }) })] }), _jsxs("div", { className: "color-picker-hex-row", children: [_jsxs("div", { className: "color-picker-hex", children: [_jsx("div", { className: "color-picker-hex-label", children: "Gamma Hex" }), _jsx("div", { className: "color-picker-hex-value", children: _jsx(HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
|
|
128
|
+
if (hasAlpha) {
|
|
129
|
+
const color4 = Color4.FromHexString(value);
|
|
130
|
+
this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
this.setState({ color: Color3.FromHexString(value) });
|
|
134
|
+
}
|
|
135
|
+
} }) })] }), this.props.linearhint && (_jsxs("div", { className: "color-picker-hex", children: [_jsx("div", { className: "color-picker-hex-label", children: "Linear Hex" }), _jsx("div", { className: "color-picker-hex-value", children: _jsx(HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: Color4.FromHexString(colorHex).toLinearSpace().toHexString(), onChange: (value) => {
|
|
136
|
+
if (hasAlpha) {
|
|
137
|
+
const color4 = Color4.FromHexString(value).toGammaSpace();
|
|
138
|
+
this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
this.setState({ color: Color3.FromHexString(value).toGammaSpace() });
|
|
142
|
+
}
|
|
143
|
+
} }) })] }))] }), this.props.linearhint && (_jsx("div", { className: "color-picker-warning", children: "(Note: This color is stored in linear but converted to gamma to be displayed here. To set color in code, use the linear hex above or use gamma.toLinearSpace()" }))] }));
|
|
136
144
|
}
|
|
137
145
|
}
|
|
138
146
|
//# sourceMappingURL=colorPicker.js.map
|
|
@@ -1 +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"]}
|
|
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-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-row\">\r\n <div className=\"color-picker-hex\">\r\n <div className=\"color-picker-hex-label\">Gamma 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-hex\">\r\n <div className=\"color-picker-hex-label\">Linear 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={Color4.FromHexString(colorHex).toLinearSpace().toHexString()}\r\n onChange={(value) => {\r\n if (hasAlpha) {\r\n const color4 = Color4.FromHexString(value).toGammaSpace();\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).toGammaSpace() });\r\n }\r\n }}\r\n />\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.props.linearhint && (\r\n <div className=\"color-picker-warning\">\r\n (Note: This color is stored in linear but converted to gamma to be displayed here. To set color in code, use the linear hex above or use\r\n gamma.toLinearSpace()\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -150,12 +150,18 @@
|
|
|
150
150
|
opacity: 0.5;
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
|
+
.color-picker-hex-row {
|
|
154
|
+
display: flex; /* Use flexbox to align items in a row */
|
|
155
|
+
flex-direction: row;
|
|
156
|
+
gap: 16px; /* Add spacing between the two hex pickers */
|
|
157
|
+
align-items: center; /* Align items vertically in the center */
|
|
158
|
+
}
|
|
153
159
|
|
|
154
160
|
.color-picker-hex {
|
|
155
161
|
grid-row: 4;
|
|
156
162
|
grid-column: 1;
|
|
157
163
|
display: grid;
|
|
158
|
-
grid-template-columns:
|
|
164
|
+
grid-template-columns: 30% 70%;
|
|
159
165
|
grid-template-rows: 100%;
|
|
160
166
|
|
|
161
167
|
.color-picker-hex-label {
|