@babylonjs/node-editor 5.0.0-rc.3 → 5.0.0-rc.4

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.
Files changed (4) hide show
  1. package/babylon.nodeEditor.max.js +53 -140
  2. package/babylon.nodeEditor.max.js.map +1 -1
  3. package/babylon.nodeEditor.module.d.ts +10 -29
  4. package/package.json +2 -2
package/babylon.nodeEditor.max.js CHANGED
@@ -65147,42 +65147,24 @@ var Color3LineComponent = /** @class */ (function (_super) {
65147
65147
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Color3LineComponent, _super);
65148
65148
  function Color3LineComponent(props) {
65149
65149
  var _this = _super.call(this, props) || this;
65150
- _this._localChange = false;
65151
- _this.state = { isExpanded: false, color: _this.props.target[_this.props.propertyName].clone() };
65150
+ _this.state = { isExpanded: false };
65152
65151
  return _this;
65153
65152
  }
65154
- Color3LineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
65155
- var currentState = nextProps.target[nextProps.propertyName];
65156
- if (!currentState.equals(nextState.color) || this._localChange) {
65157
- nextState.color = currentState.clone();
65158
- this._localChange = false;
65159
- return true;
65160
- }
65161
- return false;
65162
- };
65163
65153
  Color3LineComponent.prototype.onChange = function (newValue) {
65164
- this._localChange = true;
65165
- var isColor4 = this.props.target[this.props.propertyName].getClassName() === "Color4";
65154
+ var isColor4 = this.getCurrentColor().getClassName() === "Color4";
65166
65155
  var newColor = isColor4 ? _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"].FromHexString(newValue) : _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color3"].FromHexString(newValue);
65167
- if (this.props.onPropertyChangedObservable) {
65168
- this.props.onPropertyChangedObservable.notifyObservers({
65169
- object: this.props.target,
65170
- property: this.props.propertyName,
65171
- value: newColor,
65172
- initialValue: this.state.color,
65173
- });
65174
- }
65175
- this.props.target[this.props.propertyName] = newColor;
65176
- this.setState({ color: newColor });
65177
- if (this.props.onChange) {
65178
- this.props.onChange();
65179
- }
65156
+ this.updateColor(newColor);
65180
65157
  };
65181
65158
  Color3LineComponent.prototype.switchExpandState = function () {
65182
- this._localChange = true;
65183
65159
  this.setState({ isExpanded: !this.state.isExpanded });
65184
65160
  };
65185
- Color3LineComponent.prototype.raiseOnPropertyChanged = function (previousValue) {
65161
+ Color3LineComponent.prototype.updateColor = function (newValue) {
65162
+ var previousValue = this.getCurrentColor();
65163
+ if (newValue.equals(previousValue)) {
65164
+ return;
65165
+ }
65166
+ this.props.target[this.props.propertyName] = newValue;
65167
+ this.forceUpdate();
65186
65168
  if (this.props.onChange) {
65187
65169
  this.props.onChange();
65188
65170
  }
@@ -65192,40 +65174,21 @@ var Color3LineComponent = /** @class */ (function (_super) {
65192
65174
  this.props.onPropertyChangedObservable.notifyObservers({
65193
65175
  object: this.props.target,
65194
65176
  property: this.props.propertyName,
65195
- value: this.state.color,
65177
+ value: newValue,
65196
65178
  initialValue: previousValue,
65197
65179
  });
65198
65180
  };
65199
- Color3LineComponent.prototype.updateStateR = function (value) {
65200
- this._localChange = true;
65201
- var store = this.state.color.clone();
65202
- this.props.target[this.props.propertyName].x = value;
65203
- this.state.color.r = value;
65204
- this.props.target[this.props.propertyName] = this.state.color;
65205
- this.setState({ color: this.state.color });
65206
- this.raiseOnPropertyChanged(store);
65207
- };
65208
- Color3LineComponent.prototype.updateStateG = function (value) {
65209
- this._localChange = true;
65210
- var store = this.state.color.clone();
65211
- this.props.target[this.props.propertyName].g = value;
65212
- this.state.color.g = value;
65213
- this.props.target[this.props.propertyName] = this.state.color;
65214
- this.setState({ color: this.state.color });
65215
- this.raiseOnPropertyChanged(store);
65181
+ Color3LineComponent.prototype.modifyColor = function (modifier) {
65182
+ var color = this.getCurrentColor();
65183
+ modifier(color);
65184
+ this.updateColor(color);
65216
65185
  };
65217
- Color3LineComponent.prototype.updateStateB = function (value) {
65218
- this._localChange = true;
65219
- var store = this.state.color.clone();
65220
- this.props.target[this.props.propertyName].b = value;
65221
- this.state.color.b = value;
65222
- this.props.target[this.props.propertyName] = this.state.color;
65223
- this.setState({ color: this.state.color });
65224
- this.raiseOnPropertyChanged(store);
65186
+ Color3LineComponent.prototype.getCurrentColor = function () {
65187
+ return this.props.target[this.props.propertyName].clone();
65225
65188
  };
65226
65189
  Color3LineComponent.prototype.copyToClipboard = function () {
65227
65190
  var element = document.createElement("div");
65228
- element.textContent = this.state.color.toHexString();
65191
+ element.textContent = this.getCurrentColor().toHexString();
65229
65192
  document.body.appendChild(element);
65230
65193
  if (window.getSelection) {
65231
65194
  var range = document.createRange();
@@ -65239,11 +65202,12 @@ var Color3LineComponent = /** @class */ (function (_super) {
65239
65202
  Color3LineComponent.prototype.render = function () {
65240
65203
  var _this = this;
65241
65204
  var expandedIcon = this.state.isExpanded ? minusIcon : plusIcon;
65205
+ var color = this.getCurrentColor();
65242
65206
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3Line" },
65243
65207
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "firstLine" },
65244
65208
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label),
65245
65209
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3" },
65246
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_4__["ColorPickerLineComponent"], { value: this.state.color, globalState: this.props.globalState, onColorChanged: function (color) {
65210
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_4__["ColorPickerLineComponent"], { value: color, globalState: this.props.globalState, onColorChanged: function (color) {
65247
65211
  _this.onChange(color);
65248
65212
  } })),
65249
65213
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "copy hoverIcon", onClick: function () { return _this.copyToClipboard(); }, title: "Copy to clipboard" },
@@ -65251,9 +65215,9 @@ var Color3LineComponent = /** @class */ (function (_super) {
65251
65215
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "expand hoverIcon", onClick: function () { return _this.switchExpandState(); }, title: "Expand" },
65252
65216
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: expandedIcon, alt: "" }))),
65253
65217
  this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "secondLine" },
65254
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "r", value: this.state.color.r, onChange: function (value) { return _this.updateStateR(value); } }),
65255
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "g", value: this.state.color.g, onChange: function (value) { return _this.updateStateG(value); } }),
65256
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "b", value: this.state.color.b, onChange: function (value) { return _this.updateStateB(value); } })))));
65218
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "r", value: color.r, onChange: function (value) { return _this.modifyColor(function (col) { return col.r = value; }); } }),
65219
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "g", value: color.g, onChange: function (value) { return _this.modifyColor(function (col) { return col.g = value; }); } }),
65220
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "b", value: color.b, onChange: function (value) { return _this.modifyColor(function (col) { return col.b = value; }); } })))));
65257
65221
  };
65258
65222
  return Color3LineComponent;
65259
65223
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -65291,44 +65255,23 @@ var Color4LineComponent = /** @class */ (function (_super) {
65291
65255
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Color4LineComponent, _super);
65292
65256
  function Color4LineComponent(props) {
65293
65257
  var _this = _super.call(this, props) || this;
65294
- _this._localChange = false;
65295
- var value = _this.props.target[_this.props.propertyName];
65296
- var currentColor = value.getClassName() === "Color4" ? value.clone() : new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](value.r, value.g, value.b, 1.0);
65297
- _this.state = { isExpanded: false, color: currentColor };
65258
+ _this.state = { isExpanded: false };
65298
65259
  return _this;
65299
65260
  }
65300
- Color4LineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
65301
- var currentState = nextProps.target[nextProps.propertyName];
65302
- var currentColor = currentState.getClassName() === "Color4" ? currentState : new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](currentState.r, currentState.g, currentState.b, 1.0);
65303
- if (!currentColor.equals(nextState.color) || this._localChange) {
65304
- nextState.color = currentColor.clone();
65305
- this._localChange = false;
65306
- return true;
65307
- }
65308
- return false;
65309
- };
65310
65261
  Color4LineComponent.prototype.onChange = function (newValue) {
65311
- this._localChange = true;
65312
65262
  var newColor = _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"].FromHexString(newValue);
65313
- if (this.props.onPropertyChangedObservable) {
65314
- this.props.onPropertyChangedObservable.notifyObservers({
65315
- object: this.props.target,
65316
- property: this.props.propertyName,
65317
- value: newColor,
65318
- initialValue: this.state.color,
65319
- });
65320
- }
65321
- this.props.target[this.props.propertyName] = newColor;
65322
- this.setState({ color: this.props.target[this.props.propertyName] });
65323
- if (this.props.onChange) {
65324
- this.props.onChange();
65325
- }
65263
+ this.updateColor(newColor);
65326
65264
  };
65327
65265
  Color4LineComponent.prototype.switchExpandState = function () {
65328
- this._localChange = true;
65329
65266
  this.setState({ isExpanded: !this.state.isExpanded });
65330
65267
  };
65331
- Color4LineComponent.prototype.raiseOnPropertyChanged = function (previousValue) {
65268
+ Color4LineComponent.prototype.updateColor = function (newValue) {
65269
+ var previousValue = this.getCurrentColor();
65270
+ if (newValue.equals(previousValue)) {
65271
+ return;
65272
+ }
65273
+ this.props.target[this.props.propertyName] = newValue;
65274
+ this.forceUpdate();
65332
65275
  if (this.props.onChange) {
65333
65276
  this.props.onChange();
65334
65277
  }
@@ -65338,49 +65281,21 @@ var Color4LineComponent = /** @class */ (function (_super) {
65338
65281
  this.props.onPropertyChangedObservable.notifyObservers({
65339
65282
  object: this.props.target,
65340
65283
  property: this.props.propertyName,
65341
- value: this.state.color,
65284
+ value: newValue,
65342
65285
  initialValue: previousValue,
65343
65286
  });
65344
65287
  };
65345
- Color4LineComponent.prototype.updateStateR = function (value) {
65346
- this._localChange = true;
65347
- var store = this.state.color.clone();
65348
- this.props.target[this.props.propertyName].x = value;
65349
- this.state.color.r = value;
65350
- this.props.target[this.props.propertyName] = this.state.color;
65351
- this.setState({ color: this.state.color });
65352
- this.raiseOnPropertyChanged(store);
65353
- };
65354
- Color4LineComponent.prototype.updateStateG = function (value) {
65355
- this._localChange = true;
65356
- var store = this.state.color.clone();
65357
- this.props.target[this.props.propertyName].g = value;
65358
- this.state.color.g = value;
65359
- this.props.target[this.props.propertyName] = this.state.color;
65360
- this.setState({ color: this.state.color });
65361
- this.raiseOnPropertyChanged(store);
65362
- };
65363
- Color4LineComponent.prototype.updateStateB = function (value) {
65364
- this._localChange = true;
65365
- var store = this.state.color.clone();
65366
- this.props.target[this.props.propertyName].b = value;
65367
- this.state.color.b = value;
65368
- this.props.target[this.props.propertyName] = this.state.color;
65369
- this.setState({ color: this.state.color });
65370
- this.raiseOnPropertyChanged(store);
65288
+ Color4LineComponent.prototype.modifyColor = function (modifier) {
65289
+ var color = this.getCurrentColor();
65290
+ modifier(color);
65291
+ this.updateColor(color);
65371
65292
  };
65372
- Color4LineComponent.prototype.updateStateA = function (value) {
65373
- this._localChange = true;
65374
- var store = this.state.color.clone();
65375
- this.props.target[this.props.propertyName].a = value;
65376
- this.state.color.a = value;
65377
- this.props.target[this.props.propertyName] = this.state.color;
65378
- this.setState({ color: this.state.color });
65379
- this.raiseOnPropertyChanged(store);
65293
+ Color4LineComponent.prototype.getCurrentColor = function () {
65294
+ return this.props.target[this.props.propertyName].clone();
65380
65295
  };
65381
65296
  Color4LineComponent.prototype.copyToClipboard = function () {
65382
65297
  var element = document.createElement("div");
65383
- element.textContent = this.state.color.toHexString();
65298
+ element.textContent = this.getCurrentColor().toHexString();
65384
65299
  document.body.appendChild(element);
65385
65300
  if (window.getSelection) {
65386
65301
  var range = document.createRange();
@@ -65394,11 +65309,12 @@ var Color4LineComponent = /** @class */ (function (_super) {
65394
65309
  Color4LineComponent.prototype.render = function () {
65395
65310
  var _this = this;
65396
65311
  var expandedIcon = this.state.isExpanded ? minusIcon : plusIcon;
65312
+ var color = this.getCurrentColor();
65397
65313
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3Line" },
65398
65314
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "firstLine" },
65399
65315
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label),
65400
65316
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3" },
65401
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_4__["ColorPickerLineComponent"], { globalState: this.props.globalState, value: this.state.color, onColorChanged: function (color) {
65317
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_4__["ColorPickerLineComponent"], { globalState: this.props.globalState, value: color, onColorChanged: function (color) {
65402
65318
  _this.onChange(color);
65403
65319
  } })),
65404
65320
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "copy hoverIcon", onClick: function () { return _this.copyToClipboard(); }, title: "Copy to clipboard" },
@@ -65406,10 +65322,10 @@ var Color4LineComponent = /** @class */ (function (_super) {
65406
65322
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "expand hoverIcon", onClick: function () { return _this.switchExpandState(); }, title: "Expand" },
65407
65323
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: expandedIcon, alt: "" }))),
65408
65324
  this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "secondLine" },
65409
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "r", value: this.state.color.r, onChange: function (value) { return _this.updateStateR(value); } }),
65410
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "g", value: this.state.color.g, onChange: function (value) { return _this.updateStateG(value); } }),
65411
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "b", value: this.state.color.b, onChange: function (value) { return _this.updateStateB(value); } }),
65412
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "a", value: this.state.color.a, onChange: function (value) { return _this.updateStateA(value); } })))));
65325
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "r", value: color.r, onChange: function (value) { return _this.modifyColor(function (col) { return col.r = value; }); } }),
65326
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "g", value: color.g, onChange: function (value) { return _this.modifyColor(function (col) { return col.g = value; }); } }),
65327
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "b", value: color.b, onChange: function (value) { return _this.modifyColor(function (col) { return col.b = value; }); } }),
65328
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { globalState: this.props.globalState, label: "a", value: color.a, onChange: function (value) { return _this.modifyColor(function (col) { return col.a = value; }); } })))));
65413
65329
  };
65414
65330
  return Color4LineComponent;
65415
65331
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -65459,12 +65375,11 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
65459
65375
  div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
65460
65376
  };
65461
65377
  ColorPickerLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
65462
- var result = nextProps.value.toHexString() !== this.props.value.toHexString() || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
65463
65378
  if (nextProps.value.toHexString() !== this.props.value.toHexString()) {
65464
65379
  nextState.color = nextProps.value;
65465
65380
  nextState.hex = nextProps.value.toHexString();
65466
65381
  }
65467
- return result;
65382
+ return true;
65468
65383
  };
65469
65384
  ColorPickerLineComponent.prototype.componentDidUpdate = function () {
65470
65385
  this.syncPositions();
@@ -65474,7 +65389,6 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
65474
65389
  };
65475
65390
  ColorPickerLineComponent.prototype.setPickerState = function (enabled) {
65476
65391
  this.setState({ pickerEnabled: enabled });
65477
- this.props.globalState.blockKeyboardEvents = enabled;
65478
65392
  };
65479
65393
  ColorPickerLineComponent.prototype.render = function () {
65480
65394
  var _this = this;
@@ -65483,13 +65397,12 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
65483
65397
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker" },
65484
65398
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-rect", ref: this._floatHostRef, style: { background: this.state.hex }, onClick: function () { return _this.setPickerState(true); } }),
65485
65399
  this.state.pickerEnabled && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
65486
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-cover", onClick: function () { return _this.setPickerState(false); } }),
65487
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-float", ref: this._floatRef },
65488
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"], { color: color, onColorChanged: function (color) {
65489
- var hex = color.toHexString();
65490
- _this.setState({ hex: hex, color: color });
65491
- _this.props.onColorChanged(hex);
65492
- } }))))));
65400
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-cover", onClick: function () { return _this.setPickerState(false); } },
65401
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-float", onClick: function (ev) { return ev.stopPropagation(); }, ref: this._floatRef },
65402
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"], { color: color, onColorChanged: function (color) {
65403
+ var hex = color.toHexString();
65404
+ _this.props.onColorChanged(hex);
65405
+ } })))))));
65493
65406
  };
65494
65407
  return ColorPickerLineComponent;
65495
65408
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));