@babylonjs/gui-editor 5.13.2 → 5.14.1
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.
|
@@ -49513,8 +49513,18 @@ class ColorComponentEntry extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49513
49513
|
}
|
|
49514
49514
|
this.props.onChange(valueAsNumber);
|
|
49515
49515
|
}
|
|
49516
|
+
lock() {
|
|
49517
|
+
if (this.props.lockObject) {
|
|
49518
|
+
this.props.lockObject.lock = true;
|
|
49519
|
+
}
|
|
49520
|
+
}
|
|
49521
|
+
unlock() {
|
|
49522
|
+
if (this.props.lockObject) {
|
|
49523
|
+
this.props.lockObject.lock = false;
|
|
49524
|
+
}
|
|
49525
|
+
}
|
|
49516
49526
|
render() {
|
|
49517
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-component" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-component-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-component-label" }, { children: this.props.label }))] })));
|
|
49527
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-component" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-component-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-component-label" }, { children: this.props.label }))] })));
|
|
49518
49528
|
}
|
|
49519
49529
|
}
|
|
49520
49530
|
|
|
@@ -49650,19 +49660,19 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49650
49660
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-cursor", style: {
|
|
49651
49661
|
left: `${(hsv.r / 360.0) * 100}%`,
|
|
49652
49662
|
border: `1px solid ` + colorHexRef,
|
|
49653
|
-
} }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-rgb" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "red" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
|
|
49663
|
+
} }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-rgb" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "red" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
|
|
49654
49664
|
this.state.color.r = value / 255.0;
|
|
49655
49665
|
this.forceUpdate();
|
|
49656
|
-
} }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "green" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
|
|
49666
|
+
} }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "green" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
|
|
49657
49667
|
this.state.color.g = value / 255.0;
|
|
49658
49668
|
this.forceUpdate();
|
|
49659
|
-
} }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blue" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
|
|
49669
|
+
} }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blue" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
|
|
49660
49670
|
this.state.color.b = value / 255.0;
|
|
49661
49671
|
this.forceUpdate();
|
|
49662
|
-
} }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "alpha" + (hasAlpha ? "" : " grayed") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
|
|
49672
|
+
} }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "alpha" + (hasAlpha ? "" : " grayed") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
|
|
49663
49673
|
this.setState({ alpha: value / 255.0 });
|
|
49664
49674
|
this.forceUpdate();
|
|
49665
|
-
} }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-hex" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hex-label" }, { children: "Hex" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hex-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_hexColor__WEBPACK_IMPORTED_MODULE_4__.HexColor, { expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
|
|
49675
|
+
} }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-hex" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hex-label" }, { children: "Hex" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hex-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_hexColor__WEBPACK_IMPORTED_MODULE_4__.HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
|
|
49666
49676
|
if (hasAlpha) {
|
|
49667
49677
|
const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromHexString(value);
|
|
49668
49678
|
this.setState({ color: new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3(color4.r, color4.g, color4.b), alpha: color4.a });
|
|
@@ -49703,18 +49713,33 @@ class HexColor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49703
49713
|
}
|
|
49704
49714
|
return true;
|
|
49705
49715
|
}
|
|
49716
|
+
lock() {
|
|
49717
|
+
if (this.props.lockObject) {
|
|
49718
|
+
this.props.lockObject.lock = true;
|
|
49719
|
+
}
|
|
49720
|
+
}
|
|
49721
|
+
unlock() {
|
|
49722
|
+
if (this.props.lockObject) {
|
|
49723
|
+
this.props.lockObject.lock = false;
|
|
49724
|
+
}
|
|
49725
|
+
}
|
|
49706
49726
|
updateHexValue(valueString) {
|
|
49707
49727
|
if (valueString != "" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {
|
|
49708
49728
|
return;
|
|
49709
49729
|
}
|
|
49710
49730
|
this.setState({ hex: valueString });
|
|
49711
49731
|
if (valueString.length !== this.props.expectedLength) {
|
|
49712
|
-
|
|
49732
|
+
if (this.props.expectedLength === 8 && valueString.length === 6) {
|
|
49733
|
+
valueString = valueString + "FF";
|
|
49734
|
+
}
|
|
49735
|
+
else {
|
|
49736
|
+
return;
|
|
49737
|
+
}
|
|
49713
49738
|
}
|
|
49714
49739
|
this.props.onChange("#" + valueString);
|
|
49715
49740
|
}
|
|
49716
49741
|
render() {
|
|
49717
|
-
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "string", className: "hex-input", value: this.state.hex, onChange: (evt) => this.updateHexValue(evt.target.value) });
|
|
49742
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "string", className: "hex-input", value: this.state.hex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateHexValue(evt.target.value) }));
|
|
49718
49743
|
}
|
|
49719
49744
|
}
|
|
49720
49745
|
|
|
@@ -49995,11 +50020,11 @@ class ColorLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49995
50020
|
}
|
|
49996
50021
|
render() {
|
|
49997
50022
|
const chevron = this.state.isExpanded ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.faMinus }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.faPlus });
|
|
49998
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "firstLine" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color3" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__.ColorPickerLineComponent, { linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
|
|
50023
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "firstLine" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color3" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__.ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
|
|
49999
50024
|
this.setColorFromString(colorString);
|
|
50000
50025
|
} }) })), this.props.lockObject && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", value: this.state.color.toHexString(), onChange: (newValue) => {
|
|
50001
50026
|
this.setColorFromString(newValue);
|
|
50002
|
-
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _copy_svg__WEBPACK_IMPORTED_MODULE_9__, alt: "Copy" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) })] })))] })));
|
|
50027
|
+
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _copy_svg__WEBPACK_IMPORTED_MODULE_9__, alt: "Copy" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] })))] })));
|
|
50003
50028
|
}
|
|
50004
50029
|
}
|
|
50005
50030
|
|
|
@@ -50073,7 +50098,7 @@ class ColorPickerLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
|
50073
50098
|
return;
|
|
50074
50099
|
}
|
|
50075
50100
|
this.setState({ pickerEnabled: false });
|
|
50076
|
-
} }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-float", ref: this._floatRef }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__.ColorPicker, { color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
|
|
50101
|
+
} }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-float", ref: this._floatRef }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__.ColorPicker, { lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
|
|
50077
50102
|
const hex = color.toHexString();
|
|
50078
50103
|
this.setState({ hex, color });
|
|
50079
50104
|
this.props.onColorChanged(hex);
|
|
@@ -50412,6 +50437,11 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50412
50437
|
this._localChange = false;
|
|
50413
50438
|
this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) };
|
|
50414
50439
|
}
|
|
50440
|
+
componentWillUnmount() {
|
|
50441
|
+
if (this.props.lockObject) {
|
|
50442
|
+
this.props.lockObject.lock = false;
|
|
50443
|
+
}
|
|
50444
|
+
}
|
|
50415
50445
|
shouldComponentUpdate(nextProps, nextState) {
|
|
50416
50446
|
if (this._localChange) {
|
|
50417
50447
|
return true;
|
|
@@ -50438,6 +50468,9 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50438
50468
|
onBlur() {
|
|
50439
50469
|
this._localChange = false;
|
|
50440
50470
|
const valueAsNumber = parseFloat(this.state.value);
|
|
50471
|
+
if (this.props.lockObject) {
|
|
50472
|
+
this.props.lockObject.lock = false;
|
|
50473
|
+
}
|
|
50441
50474
|
if (isNaN(valueAsNumber)) {
|
|
50442
50475
|
this.props.onChange(this.props.value);
|
|
50443
50476
|
return;
|
|
@@ -50445,7 +50478,11 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50445
50478
|
this.props.onChange(valueAsNumber);
|
|
50446
50479
|
}
|
|
50447
50480
|
render() {
|
|
50448
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt),
|
|
50481
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt), onFocus: () => {
|
|
50482
|
+
if (this.props.lockObject) {
|
|
50483
|
+
this.props.lockObject.lock = true;
|
|
50484
|
+
}
|
|
50485
|
+
}, onBlur: () => this.onBlur() })] })));
|
|
50449
50486
|
}
|
|
50450
50487
|
}
|
|
50451
50488
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
@@ -50870,7 +50907,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
50870
50907
|
}
|
|
50871
50908
|
return 0;
|
|
50872
50909
|
}
|
|
50873
|
-
updateValue(value) {
|
|
50910
|
+
updateValue(value, valueToValidate) {
|
|
50874
50911
|
if (this.props.numbersOnly) {
|
|
50875
50912
|
if (/[^0-9.\p\x%-]/g.test(value)) {
|
|
50876
50913
|
return;
|
|
@@ -50898,8 +50935,8 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
50898
50935
|
}
|
|
50899
50936
|
this._localChange = true;
|
|
50900
50937
|
const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName];
|
|
50901
|
-
if (this.props.validator) {
|
|
50902
|
-
if (this.props.validator(
|
|
50938
|
+
if (this.props.validator && valueToValidate) {
|
|
50939
|
+
if (this.props.validator(valueToValidate) == false) {
|
|
50903
50940
|
value = store;
|
|
50904
50941
|
}
|
|
50905
50942
|
}
|
|
@@ -50946,15 +50983,15 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
50946
50983
|
}
|
|
50947
50984
|
this.updateValue(this.state.value);
|
|
50948
50985
|
}, onBlur: (evt) => {
|
|
50949
|
-
this.updateValue(evt.target.value);
|
|
50986
|
+
this.updateValue(evt.target.value, evt.target.value);
|
|
50950
50987
|
if (this.props.lockObject) {
|
|
50951
50988
|
this.props.lockObject.lock = false;
|
|
50952
50989
|
}
|
|
50953
|
-
} }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: () => {
|
|
50990
|
+
} }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: (evt) => {
|
|
50954
50991
|
if (this.props.lockObject) {
|
|
50955
50992
|
this.props.lockObject.lock = false;
|
|
50956
50993
|
}
|
|
50957
|
-
this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName]) || "");
|
|
50994
|
+
this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName]) || "", evt.target.value);
|
|
50958
50995
|
}, onFocus: () => {
|
|
50959
50996
|
if (this.props.lockObject) {
|
|
50960
50997
|
this.props.lockObject.lock = true;
|
|
@@ -51187,15 +51224,17 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
51187
51224
|
/* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./commandButtonComponent */ "../../../tools/guiEditor/dist/components/commandButtonComponent.js");
|
|
51188
51225
|
/* harmony import */ var _commandDropdownComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./commandDropdownComponent */ "../../../tools/guiEditor/dist/components/commandDropdownComponent.js");
|
|
51189
51226
|
/* harmony import */ var shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared-ui-components/lines/colorLineComponent */ "../../../dev/sharedUiComponents/dist/lines/colorLineComponent.js");
|
|
51190
|
-
/* harmony import */ var
|
|
51191
|
-
/* harmony import */ var
|
|
51192
|
-
/* harmony import */ var
|
|
51193
|
-
/* harmony import */ var
|
|
51194
|
-
/* harmony import */ var
|
|
51195
|
-
/* harmony import */ var
|
|
51196
|
-
/* harmony import */ var
|
|
51197
|
-
/* harmony import */ var
|
|
51198
|
-
/* harmony import */ var
|
|
51227
|
+
/* harmony import */ var shared_ui_components_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! shared-ui-components/tabs/propertyGrids/lockObject */ "../../../dev/sharedUiComponents/dist/tabs/propertyGrids/lockObject.js");
|
|
51228
|
+
/* harmony import */ var _imgs_hamburgerIcon_svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../imgs/hamburgerIcon.svg */ "../../../tools/guiEditor/dist/imgs/hamburgerIcon.svg");
|
|
51229
|
+
/* harmony import */ var _imgs_pointerIcon_svg__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../imgs/pointerIcon.svg */ "../../../tools/guiEditor/dist/imgs/pointerIcon.svg");
|
|
51230
|
+
/* harmony import */ var _imgs_handIcon_svg__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../imgs/handIcon.svg */ "../../../tools/guiEditor/dist/imgs/handIcon.svg");
|
|
51231
|
+
/* harmony import */ var _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../imgs/zoomIcon.svg */ "../../../tools/guiEditor/dist/imgs/zoomIcon.svg");
|
|
51232
|
+
/* harmony import */ var _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../imgs/guidesIcon.svg */ "../../../tools/guiEditor/dist/imgs/guidesIcon.svg");
|
|
51233
|
+
/* harmony import */ var _imgs_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../imgs/babylonLogo.svg */ "../../../tools/guiEditor/dist/imgs/babylonLogo.svg");
|
|
51234
|
+
/* harmony import */ var _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../imgs/canvasFitIcon.svg */ "../../../tools/guiEditor/dist/imgs/canvasFitIcon.svg");
|
|
51235
|
+
/* harmony import */ var _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../imgs/betaFlag.svg */ "../../../tools/guiEditor/dist/imgs/betaFlag.svg");
|
|
51236
|
+
/* harmony import */ var _scss_commandBar_scss__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../scss/commandBar.scss */ "../../../tools/guiEditor/dist/scss/commandBar.scss");
|
|
51237
|
+
|
|
51199
51238
|
|
|
51200
51239
|
|
|
51201
51240
|
|
|
@@ -51250,6 +51289,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51250
51289
|
super(props);
|
|
51251
51290
|
this._sizeOption = 0;
|
|
51252
51291
|
this._stopUpdating = false;
|
|
51292
|
+
this._lockObject = new shared_ui_components_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_10__.LockObject();
|
|
51253
51293
|
props.globalState.onToolChangeObservable.add(() => {
|
|
51254
51294
|
this.forceUpdate();
|
|
51255
51295
|
});
|
|
@@ -51267,7 +51307,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51267
51307
|
this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
|
|
51268
51308
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", false);
|
|
51269
51309
|
}
|
|
51270
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-commands" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "commands-left" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src:
|
|
51310
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-commands" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "commands-left" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_16__, color: "white", className: "active", draggable: false }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandDropdownComponent__WEBPACK_IMPORTED_MODULE_8__.CommandDropdownComponent, { globalState: this.props.globalState, toRight: true, icon: _imgs_hamburgerIcon_svg__WEBPACK_IMPORTED_MODULE_11__, tooltip: "Options", items: [
|
|
51271
51311
|
{
|
|
51272
51312
|
label: "Save",
|
|
51273
51313
|
onClick: () => {
|
|
@@ -51328,15 +51368,15 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51328
51368
|
window.open("https://forum.babylonjs.com/t/introducing-the-gui-editor-beta/28943", "_blank");
|
|
51329
51369
|
},
|
|
51330
51370
|
},
|
|
51331
|
-
] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Select", icon:
|
|
51371
|
+
] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Select", icon: _imgs_pointerIcon_svg__WEBPACK_IMPORTED_MODULE_12__, shortcut: "S", isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.SELECT, onClick: () => {
|
|
51332
51372
|
this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.SELECT;
|
|
51333
|
-
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Pan", icon:
|
|
51373
|
+
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Pan", icon: _imgs_handIcon_svg__WEBPACK_IMPORTED_MODULE_13__, shortcut: "P", isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.PAN, onClick: () => {
|
|
51334
51374
|
this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.PAN;
|
|
51335
|
-
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Zoom", shortcut: "Z", icon:
|
|
51375
|
+
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Zoom", shortcut: "Z", icon: _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_14__, isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM, onClick: () => {
|
|
51336
51376
|
this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM;
|
|
51337
|
-
} })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Fit to Window", shortcut: "F", icon:
|
|
51377
|
+
} })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Fit to Window", shortcut: "F", icon: _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_17__, isActive: false, onClick: () => {
|
|
51338
51378
|
this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
|
|
51339
|
-
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Toggle Guides", shortcut: "G", icon:
|
|
51379
|
+
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Toggle Guides", shortcut: "G", icon: _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__, isActive: this.props.globalState.outlines, onClick: () => (this.props.globalState.outlines = !this.props.globalState.outlines) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "divider padded" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: this._lockObject, label: "Artboard:", target: this.props.globalState, propertyName: "backgroundColor", disableAlpha: true }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider padded" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Responsive:", iconLabel: "Responsive GUIs will resize the UI layout and reflow controls to accommodate different device screen sizes", isSelected: () => core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true), onSelect: (value) => {
|
|
51340
51380
|
this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
|
|
51341
51381
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", value);
|
|
51342
51382
|
this._sizeOption = _sizeOptions.length;
|
|
@@ -51370,7 +51410,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51370
51410
|
}, onDragStop: (newValue) => {
|
|
51371
51411
|
this._stopUpdating = false;
|
|
51372
51412
|
this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
|
|
51373
|
-
}, arrows: true, isInteger: true })] }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "commands-right" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src:
|
|
51413
|
+
}, arrows: true, isInteger: true })] }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "commands-right" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_18__, className: "beta-flag", draggable: false }) }))] })));
|
|
51374
51414
|
}
|
|
51375
51415
|
}
|
|
51376
51416
|
|