@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
- return;
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), onBlur: () => this.onBlur() })] })));
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(value) == false) {
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 _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");
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: _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: [
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: _imgs_pointerIcon_svg__WEBPACK_IMPORTED_MODULE_11__, shortcut: "S", isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.SELECT, onClick: () => {
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: _imgs_handIcon_svg__WEBPACK_IMPORTED_MODULE_12__, shortcut: "P", isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.PAN, onClick: () => {
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: _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_13__, isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM, onClick: () => {
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: _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_16__, isActive: false, onClick: () => {
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: _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) => {
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: _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_17__, className: "beta-flag", draggable: false }) }))] })));
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