@babylonjs/gui-editor 5.13.1 → 5.14.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.
|
@@ -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,6 +49713,16 @@ 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;
|
|
@@ -49714,7 +49734,7 @@ class HexColor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49714
49734
|
this.props.onChange("#" + valueString);
|
|
49715
49735
|
}
|
|
49716
49736
|
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) });
|
|
49737
|
+
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
49738
|
}
|
|
49719
49739
|
}
|
|
49720
49740
|
|
|
@@ -49995,11 +50015,11 @@ class ColorLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49995
50015
|
}
|
|
49996
50016
|
render() {
|
|
49997
50017
|
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) => {
|
|
50018
|
+
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
50019
|
this.setColorFromString(colorString);
|
|
50000
50020
|
} }) })), 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
50021
|
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) })] })))] })));
|
|
50022
|
+
}, 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
50023
|
}
|
|
50004
50024
|
}
|
|
50005
50025
|
|
|
@@ -50073,7 +50093,7 @@ class ColorPickerLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
|
50073
50093
|
return;
|
|
50074
50094
|
}
|
|
50075
50095
|
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) => {
|
|
50096
|
+
} }, { 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
50097
|
const hex = color.toHexString();
|
|
50078
50098
|
this.setState({ hex, color });
|
|
50079
50099
|
this.props.onColorChanged(hex);
|
|
@@ -50412,6 +50432,11 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50412
50432
|
this._localChange = false;
|
|
50413
50433
|
this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) };
|
|
50414
50434
|
}
|
|
50435
|
+
componentWillUnmount() {
|
|
50436
|
+
if (this.props.lockObject) {
|
|
50437
|
+
this.props.lockObject.lock = false;
|
|
50438
|
+
}
|
|
50439
|
+
}
|
|
50415
50440
|
shouldComponentUpdate(nextProps, nextState) {
|
|
50416
50441
|
if (this._localChange) {
|
|
50417
50442
|
return true;
|
|
@@ -50438,6 +50463,9 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50438
50463
|
onBlur() {
|
|
50439
50464
|
this._localChange = false;
|
|
50440
50465
|
const valueAsNumber = parseFloat(this.state.value);
|
|
50466
|
+
if (this.props.lockObject) {
|
|
50467
|
+
this.props.lockObject.lock = false;
|
|
50468
|
+
}
|
|
50441
50469
|
if (isNaN(valueAsNumber)) {
|
|
50442
50470
|
this.props.onChange(this.props.value);
|
|
50443
50471
|
return;
|
|
@@ -50445,7 +50473,11 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50445
50473
|
this.props.onChange(valueAsNumber);
|
|
50446
50474
|
}
|
|
50447
50475
|
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),
|
|
50476
|
+
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: () => {
|
|
50477
|
+
if (this.props.lockObject) {
|
|
50478
|
+
this.props.lockObject.lock = true;
|
|
50479
|
+
}
|
|
50480
|
+
}, onBlur: () => this.onBlur() })] })));
|
|
50449
50481
|
}
|
|
50450
50482
|
}
|
|
50451
50483
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
@@ -51187,15 +51219,17 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
51187
51219
|
/* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./commandButtonComponent */ "../../../tools/guiEditor/dist/components/commandButtonComponent.js");
|
|
51188
51220
|
/* harmony import */ var _commandDropdownComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./commandDropdownComponent */ "../../../tools/guiEditor/dist/components/commandDropdownComponent.js");
|
|
51189
51221
|
/* 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
|
|
51222
|
+
/* 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");
|
|
51223
|
+
/* harmony import */ var _imgs_hamburgerIcon_svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../imgs/hamburgerIcon.svg */ "../../../tools/guiEditor/dist/imgs/hamburgerIcon.svg");
|
|
51224
|
+
/* harmony import */ var _imgs_pointerIcon_svg__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../imgs/pointerIcon.svg */ "../../../tools/guiEditor/dist/imgs/pointerIcon.svg");
|
|
51225
|
+
/* harmony import */ var _imgs_handIcon_svg__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../imgs/handIcon.svg */ "../../../tools/guiEditor/dist/imgs/handIcon.svg");
|
|
51226
|
+
/* harmony import */ var _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../imgs/zoomIcon.svg */ "../../../tools/guiEditor/dist/imgs/zoomIcon.svg");
|
|
51227
|
+
/* harmony import */ var _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../imgs/guidesIcon.svg */ "../../../tools/guiEditor/dist/imgs/guidesIcon.svg");
|
|
51228
|
+
/* harmony import */ var _imgs_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../imgs/babylonLogo.svg */ "../../../tools/guiEditor/dist/imgs/babylonLogo.svg");
|
|
51229
|
+
/* harmony import */ var _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../imgs/canvasFitIcon.svg */ "../../../tools/guiEditor/dist/imgs/canvasFitIcon.svg");
|
|
51230
|
+
/* harmony import */ var _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../imgs/betaFlag.svg */ "../../../tools/guiEditor/dist/imgs/betaFlag.svg");
|
|
51231
|
+
/* harmony import */ var _scss_commandBar_scss__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../scss/commandBar.scss */ "../../../tools/guiEditor/dist/scss/commandBar.scss");
|
|
51232
|
+
|
|
51199
51233
|
|
|
51200
51234
|
|
|
51201
51235
|
|
|
@@ -51250,6 +51284,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51250
51284
|
super(props);
|
|
51251
51285
|
this._sizeOption = 0;
|
|
51252
51286
|
this._stopUpdating = false;
|
|
51287
|
+
this._lockObject = new shared_ui_components_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_10__.LockObject();
|
|
51253
51288
|
props.globalState.onToolChangeObservable.add(() => {
|
|
51254
51289
|
this.forceUpdate();
|
|
51255
51290
|
});
|
|
@@ -51267,7 +51302,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51267
51302
|
this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
|
|
51268
51303
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", false);
|
|
51269
51304
|
}
|
|
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:
|
|
51305
|
+
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
51306
|
{
|
|
51272
51307
|
label: "Save",
|
|
51273
51308
|
onClick: () => {
|
|
@@ -51328,15 +51363,15 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51328
51363
|
window.open("https://forum.babylonjs.com/t/introducing-the-gui-editor-beta/28943", "_blank");
|
|
51329
51364
|
},
|
|
51330
51365
|
},
|
|
51331
|
-
] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Select", icon:
|
|
51366
|
+
] }), (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
51367
|
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:
|
|
51368
|
+
} }), (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
51369
|
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:
|
|
51370
|
+
} }), (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
51371
|
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:
|
|
51372
|
+
} })] })), (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
51373
|
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:
|
|
51374
|
+
} }), (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
51375
|
this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
|
|
51341
51376
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", value);
|
|
51342
51377
|
this._sizeOption = _sizeOptions.length;
|
|
@@ -51370,7 +51405,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51370
51405
|
}, onDragStop: (newValue) => {
|
|
51371
51406
|
this._stopUpdating = false;
|
|
51372
51407
|
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:
|
|
51408
|
+
}, 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
51409
|
}
|
|
51375
51410
|
}
|
|
51376
51411
|
|