@babylonjs/gui-editor 5.13.3 → 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), onBlur: () => this.onBlur() })] })));
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 _imgs_hamburgerIcon_svg__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../imgs/hamburgerIcon.svg */ "../../../tools/guiEditor/dist/imgs/hamburgerIcon.svg");
51191
- /* harmony import */ var _imgs_pointerIcon_svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../imgs/pointerIcon.svg */ "../../../tools/guiEditor/dist/imgs/pointerIcon.svg");
51192
- /* harmony import */ var _imgs_handIcon_svg__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../imgs/handIcon.svg */ "../../../tools/guiEditor/dist/imgs/handIcon.svg");
51193
- /* harmony import */ var _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../imgs/zoomIcon.svg */ "../../../tools/guiEditor/dist/imgs/zoomIcon.svg");
51194
- /* harmony import */ var _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../imgs/guidesIcon.svg */ "../../../tools/guiEditor/dist/imgs/guidesIcon.svg");
51195
- /* harmony import */ var _imgs_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../imgs/babylonLogo.svg */ "../../../tools/guiEditor/dist/imgs/babylonLogo.svg");
51196
- /* harmony import */ var _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../imgs/canvasFitIcon.svg */ "../../../tools/guiEditor/dist/imgs/canvasFitIcon.svg");
51197
- /* harmony import */ var _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../imgs/betaFlag.svg */ "../../../tools/guiEditor/dist/imgs/betaFlag.svg");
51198
- /* harmony import */ var _scss_commandBar_scss__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../scss/commandBar.scss */ "../../../tools/guiEditor/dist/scss/commandBar.scss");
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: _imgs_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_15__, 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_10__, tooltip: "Options", items: [
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: _imgs_pointerIcon_svg__WEBPACK_IMPORTED_MODULE_11__, shortcut: "S", isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.SELECT, onClick: () => {
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: _imgs_handIcon_svg__WEBPACK_IMPORTED_MODULE_12__, shortcut: "P", isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.PAN, onClick: () => {
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: _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_13__, isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM, onClick: () => {
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: _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_16__, isActive: false, onClick: () => {
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: _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_14__, 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, { 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) => {
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: _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_17__, className: "beta-flag", draggable: false }) }))] })));
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