|
@@ -1,10 +1,12 @@
|
|
|
import * as React from "react";
|
|
|
import { Color4, Color3 } from 'babylonjs/Maths/math.color';
|
|
|
import { SketchPicker } from 'react-color';
|
|
|
+import { GlobalState } from '../globalState';
|
|
|
|
|
|
export interface IColorPickerComponentProps {
|
|
|
value: Color4 | Color3;
|
|
|
onColorChanged: (newOne: string) => void;
|
|
|
+ globalState: GlobalState;
|
|
|
disableAlpha?: boolean;
|
|
|
}
|
|
|
|
|
@@ -71,6 +73,11 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
|
|
|
this.syncPositions();
|
|
|
}
|
|
|
|
|
|
+ setPickerState(enabled: boolean) {
|
|
|
+ this.setState({ pickerEnabled: enabled });
|
|
|
+ this.props.globalState.blockKeyboardEvents = enabled;
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
var color = this.state.color;
|
|
|
|
|
@@ -78,13 +85,13 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
|
|
|
<div className="color-picker">
|
|
|
<div className="color-rect" ref={this._floatHostRef}
|
|
|
style={{background: this.state.hex}}
|
|
|
- onClick={() => this.setState({pickerEnabled: true})}>
|
|
|
+ onClick={() => this.setPickerState(true)}>
|
|
|
|
|
|
</div>
|
|
|
{
|
|
|
this.state.pickerEnabled &&
|
|
|
<>
|
|
|
- <div className="color-picker-cover" onClick={() => this.setState({pickerEnabled: false})}></div>
|
|
|
+ <div className="color-picker-cover" onClick={() => this.setPickerState(false)}></div>
|
|
|
<div className="color-picker-float" ref={this._floatRef}>
|
|
|
<SketchPicker color={color}
|
|
|
disableAlpha={this.props.disableAlpha}
|