@babylonjs/inspector 5.0.0-beta.7 → 5.0.0-beta.8

package/babylon.inspector.bundle.max.js

@@ -47158,7 +47158,7 @@ var AnimationCurveEditorComponent = /** @class */ (function (_super) {
         }
         this.setState({ isOpen: false });
         this.props.context.activeAnimations = [];
-        this.props.context.onActiveAnimationChanged.notifyObservers();
+        this.props.context.onActiveAnimationChanged.notifyObservers({});
     };
     AnimationCurveEditorComponent.prototype.shouldComponentUpdate = function (newProps, newState) {
         var _this = this;
@@ -47170,7 +47170,7 @@ var AnimationCurveEditorComponent = /** @class */ (function (_super) {
                         _this.props.context.activeAnimations.push(_this.props.context.useTargetAnimations
                             ? _this.props.context.animations[0].animation
                             : _this.props.context.animations[0]);
-                        _this.props.context.onActiveAnimationChanged.notifyObservers();
+                        _this.props.context.onActiveAnimationChanged.notifyObservers({});
                     });
                 }
             }
@@ -48026,6 +48026,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Misc/observable */ "@babylonjs/core/Misc/observable");
 /* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 
+;
 var Context = /** @class */ (function () {
     function Context() {
         this.activeAnimations = [];
@@ -48935,13 +48936,16 @@ var GraphComponent = /** @class */ (function (_super) {
         _this.props.context.onHostWindowResized.add(function () {
             _this._computeSizes();
         });
-        _this._onActiveAnimationChangedObserver = _this.props.context.onActiveAnimationChanged.add(function () {
-            _this._evaluateKeys();
+        _this._onActiveAnimationChangedObserver = _this.props.context.onActiveAnimationChanged.add(function (_a) {
+            var _b = _a.evaluateKeys, evaluateKeys = _b === void 0 ? true : _b, _c = _a.frame, frame = _c === void 0 ? true : _c, _d = _a.range, range = _d === void 0 ? true : _d;
+            if (evaluateKeys) {
+                _this._evaluateKeys(frame, range);
+            }
             _this._computeSizes();
             _this.forceUpdate();
         });
         _this.props.context.onFrameRequired.add(function () {
-            _this._frame();
+            _this._frameFromActiveKeys();
             _this.forceUpdate();
         });
         _this.props.context.onRangeUpdated.add(function () {
@@ -48977,9 +48981,12 @@ var GraphComponent = /** @class */ (function (_super) {
                 if (deletedFrame !== null) {
                     _this.props.context.moveToFrame(deletedFrame);
                 }
-                _this.props.context.activeKeyPoints = [];
             }
-            _this.props.context.onActiveAnimationChanged.notifyObservers();
+            _this._evaluateKeys(false, false);
+            _this.props.context.activeKeyPoints = [];
+            _this.props.context.onActiveKeyPointChanged.notifyObservers();
+            _this.props.context.onActiveAnimationChanged.notifyObservers({ evaluateKeys: false });
+            _this.forceUpdate();
         });
         // Create or Update keypoint
         _this.props.context.onCreateOrUpdateKeyPointRequired.add(function () {
@@ -49072,7 +49079,7 @@ var GraphComponent = /** @class */ (function (_super) {
             _this._evaluateKeys(false, false);
             _this.props.context.activeKeyPoints = [];
             _this.props.context.onActiveKeyPointChanged.notifyObservers();
-            _this.props.context.onActiveAnimationChanged.notifyObservers();
+            _this.props.context.onActiveAnimationChanged.notifyObservers({ evaluateKeys: false });
             _this.forceUpdate();
         });
         return _this;
@@ -49113,10 +49120,6 @@ var GraphComponent = /** @class */ (function (_super) {
             return;
         }
         this._curves = [];
-        this._minValue = Number.MAX_VALUE;
-        this._maxValue = -Number.MAX_VALUE;
-        this._minFrame = Number.MAX_VALUE;
-        this._maxFrame = -Number.MAX_VALUE;
         for (var _i = 0, _b = this.props.context.activeAnimations; _i < _b.length; _i++) {
             var animation = _b[_i];
             var keys = animation.getKeys();
@@ -49162,7 +49165,7 @@ var GraphComponent = /** @class */ (function (_super) {
             }
         }
         if (frame) {
-            this._frame();
+            this._frameFromActiveKeys();
         }
     };
     GraphComponent.prototype._extractValuesFromKeys = function (keys, dataType, curvesToPushTo, propertyFilter) {
@@ -49511,16 +49514,17 @@ var GraphComponent = /** @class */ (function (_super) {
                     } }, text)));
         });
     };
-    GraphComponent.prototype._frame = function () {
+    GraphComponent.prototype._frameFromActiveKeys = function () {
         if (this.props.context.activeAnimations.length === 0) {
             return;
         }
         this._offsetX = 20;
         this._offsetY = 20;
-        this._minValue = Number.MAX_VALUE;
-        this._maxValue = -Number.MAX_VALUE;
-        this._minFrame = Number.MAX_VALUE;
-        this._maxFrame = -Number.MAX_VALUE;
+        var minValue = Number.MAX_VALUE;
+        var maxValue = -Number.MAX_VALUE;
+        var minFrame = Number.MAX_VALUE;
+        var maxFrame = -Number.MAX_VALUE;
+        var hasRange = false;
         var _loop_1 = function (animation) {
             var propertyFilter = undefined;
             var activeChannel = this_1.props.context.getActiveChannel(animation);
@@ -49531,13 +49535,19 @@ var GraphComponent = /** @class */ (function (_super) {
                 }
             }
             var keys = animation.getKeys();
-            // Only keep selected keys
-            if (this_1.props.context.activeKeyPoints && this_1.props.context.activeKeyPoints.length > 1) {
+            // Only keep selected keys, the previous sibling to the first key, and the next sibling of the last key
+            if (this_1.props.context.activeKeyPoints && this_1.props.context.activeKeyPoints.length > 0) {
                 var newKeys = [];
-                for (var _b = 0, _c = this_1.props.context.activeKeyPoints; _b < _c.length; _b++) {
-                    var keyPoint = _c[_b];
+                for (var i = 0; i < this_1.props.context.activeKeyPoints.length; i++) {
+                    var keyPoint = this_1.props.context.activeKeyPoints[i];
                     if (keyPoint.props.curve.animation === animation) {
                         newKeys.push(keys[keyPoint.props.keyId]);
+                        if (i === 0 && keyPoint.props.keyId >= 1) {
+                            newKeys.unshift(keys[keyPoint.props.keyId - 1]);
+                        }
+                        if (i === this_1.props.context.activeKeyPoints.length - 1 && keyPoint.props.keyId < keys.length - 1) {
+                            newKeys.push(keys[keyPoint.props.keyId + 1]);
+                        }
                     }
                 }
                 keys = newKeys;
@@ -49546,16 +49556,24 @@ var GraphComponent = /** @class */ (function (_super) {
                 return "continue";
             }
             var values = this_1._extractValuesFromKeys(keys, animation.dataType, undefined, propertyFilter);
-            this_1._minValue = Math.min(this_1._minValue, values.min);
-            this_1._maxValue = Math.max(this_1._maxValue, values.max);
-            this_1._minFrame = Math.min(this_1._minFrame, keys[0].frame);
-            this_1._maxFrame = Math.max(this_1._maxFrame, keys[keys.length - 1].frame);
+            minValue = Math.min(minValue, values.min);
+            maxValue = Math.max(maxValue, values.max);
+            minFrame = Math.min(minFrame, keys[0].frame);
+            maxFrame = Math.max(maxFrame, keys[keys.length - 1].frame);
+            hasRange = true;
         };
         var this_1 = this;
         for (var _i = 0, _a = this.props.context.activeAnimations; _i < _a.length; _i++) {
             var animation = _a[_i];
             _loop_1(animation);
         }
+        if (!hasRange) {
+            return;
+        }
+        this._minFrame = minFrame;
+        this._maxFrame = maxFrame;
+        this._minValue = minValue;
+        this._maxValue = maxValue;
         this.props.context.referenceMinFrame = this._minFrame;
         this.props.context.referenceMaxFrame = this._maxFrame;
         var frameConvert = Math.abs(this._convertX(this._maxFrame) - this._convertX(this._minFrame)) + this._offsetX * 2;
@@ -50714,6 +50732,16 @@ var AddAnimationComponent = /** @class */ (function (_super) {
                 ? this.props.context.animations[0].animation.framePerSecond
                 : this.props.context.animations[0].framePerSecond
             : 60;
+        var minFrame = this.props.context.referenceMinFrame;
+        var maxFrame = this.props.context.referenceMaxFrame;
+        if (this.props.context.animations) {
+            for (var _i = 0, _a = this.props.context.animations; _i < _a.length; _i++) {
+                var anim = _a[_i];
+                var innerAnim = this.props.context.useTargetAnimations ? anim.animation : anim;
+                minFrame = Math.min(minFrame, innerAnim.getKeys()[0].frame);
+                maxFrame = Math.max(maxFrame, innerAnim.getKeys()[innerAnim.getKeys().length - 1].frame);
+            }
+        }
         var dataType = 0;
         var loopMode = 0;
         var defaultValue0;
@@ -50801,13 +50829,13 @@ var AddAnimationComponent = /** @class */ (function (_super) {
         var animation = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"](displayName, property, fps, dataType, loopMode);
         var keys = [];
         keys.push({
-            frame: context.referenceMinFrame,
+            frame: minFrame,
             value: defaultValue0,
             inTangent: defaultInTangent0,
             outTangent: defaultOutTangent0
         });
         keys.push({
-            frame: context.referenceMaxFrame,
+            frame: maxFrame,
             value: defaultValue1,
             inTangent: defaultInTangent1,
             outTangent: defaultOutTangent1
@@ -50825,7 +50853,7 @@ var AddAnimationComponent = /** @class */ (function (_super) {
         }
         context.activeAnimations.push(animation);
         context.prepare();
-        context.onActiveAnimationChanged.notifyObservers();
+        context.onActiveAnimationChanged.notifyObservers({});
         context.onAnimationsLoaded.notifyObservers();
     };
     AddAnimationComponent.prototype.getInferredType = function (activeProperty) {
@@ -51024,7 +51052,7 @@ var AnimationEntryComponent = /** @class */ (function (_super) {
                     to: this.props.context.getAnimationSortIndex(this.props.animation),
                 };
                 this.props.context.onSelectToActivated.notifyObservers(payload);
-                this.props.context.onActiveAnimationChanged.notifyObservers();
+                this.props.context.onActiveAnimationChanged.notifyObservers({});
             }
             return;
         }
@@ -51042,7 +51070,7 @@ var AnimationEntryComponent = /** @class */ (function (_super) {
             }
         }
         this.props.context.disableChannel(this.props.animation);
-        this.props.context.onActiveAnimationChanged.notifyObservers();
+        this.props.context.onActiveAnimationChanged.notifyObservers({});
     };
     AnimationEntryComponent.prototype._expandOrCollapse = function () {
         this.setState({ isExpanded: !this.state.isExpanded });
@@ -51177,7 +51205,7 @@ var AnimationSubEntryComponent = /** @class */ (function (_super) {
             }
         }
         _this.state = { isSelected: isSelected };
-        _this._onActiveAnimationChangedObserver = props.context.onActiveAnimationChanged.add(function (animation) {
+        _this._onActiveAnimationChangedObserver = props.context.onActiveAnimationChanged.add(function () {
             _this.forceUpdate();
         });
         _this._onActiveKeyPointChangedObserver = _this.props.context.onActiveKeyPointChanged.add(function () {
@@ -51220,7 +51248,7 @@ var AnimationSubEntryComponent = /** @class */ (function (_super) {
             }
         }
         this.props.context.enableChannel(this.props.animation, this.props.color);
-        this.props.context.onActiveAnimationChanged.notifyObservers();
+        this.props.context.onActiveAnimationChanged.notifyObservers({});
     };
     AnimationSubEntryComponent.prototype.render = function () {
         var _this = this;
@@ -51398,7 +51426,7 @@ var LoadAnimationComponent = /** @class */ (function (_super) {
             context.activeAnimations = animations.length ? animations : [];
             context.prepare();
             context.onAnimationsLoaded.notifyObservers();
-            context.onActiveAnimationChanged.notifyObservers();
+            context.onActiveAnimationChanged.notifyObservers({});
         }, undefined, true);
         evt.target.value = "";
     };
@@ -51420,7 +51448,7 @@ var LoadAnimationComponent = /** @class */ (function (_super) {
             context.activeAnimations = context.animations.length ? context.animations : [];
             context.prepare();
             context.onAnimationsLoaded.notifyObservers();
-            context.onActiveAnimationChanged.notifyObservers();
+            context.onActiveAnimationChanged.notifyObservers({});
         })
             .catch(function (err) {
             var _a;
@@ -51629,7 +51657,7 @@ var SideBarComponent = /** @class */ (function (_super) {
             var indexInActiveList = _this.props.context.activeAnimations.indexOf(animationToDelete);
             if (indexInActiveList !== -1) {
                 _this.props.context.activeAnimations.splice(indexInActiveList, 1);
-                _this.props.context.onActiveAnimationChanged.notifyObservers();
+                _this.props.context.onActiveAnimationChanged.notifyObservers({});
             }
             var index = -1;
             if (_this.props.context.useTargetAnimations) {
@@ -56750,13 +56778,6 @@ var SkeletonPropertyGridComponent = /** @class */ (function (_super) {
         }
         return true;
     };
-    SkeletonPropertyGridComponent.prototype.onOverrideMeshLink = function () {
-        if (!this.props.globalState.onSelectionChangedObservable) {
-            return;
-        }
-        var skeleton = this.props.skeleton;
-        this.props.globalState.onSelectionChangedObservable.notifyObservers(skeleton.overrideMesh);
-    };
     SkeletonPropertyGridComponent.prototype.render = function () {
         var _this = this;
         var skeleton = this.props.skeleton;
@@ -56792,7 +56813,6 @@ var SkeletonPropertyGridComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "GENERAL", selection: this.props.globalState },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "ID", value: skeleton.id }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Bone count", value: skeleton.bones.length.toString() }),
-                skeleton.overrideMesh && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Override mesh", value: skeleton.overrideMesh.name, onLink: function () { return _this.onOverrideMeshLink(); } }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Use texture to store matrices", target: skeleton, propertyName: "useTextureToStoreBoneMatrices", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__["ButtonLineComponent"], { label: "Return to rest", onClick: function () { return skeleton.returnToRest(); } })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "DEBUG", selection: this.props.globalState },
@@ -65065,7 +65085,9 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
                     initialValue: this.state.isSelected,
                 });
             }
-            this.props.target[this.props.propertyName] = !this.state.isSelected;
+            if (this.props.target && this.props.propertyName) {
+                this.props.target[this.props.propertyName] = !this.state.isSelected;
+            }
         }
         if (this.props.onValueChanged) {
             this.props.onValueChanged();
@@ -65741,7 +65763,9 @@ var FloatLineComponent = /** @class */ (function (_super) {
                             if (_this.props.onEnter) {
                                 _this.props.onEnter(_this._store);
                             }
-                        }, placeholder: placeholder, onFocus: function () { return _this.lock(); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } })))),
+                        }, placeholder: placeholder, onFocus: function () { return _this.lock(); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } })),
+                this.props.unit && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("button", { className: this.props.unitLocked ? "unit disabled" : "unit", onClick: function () { if (_this.props.onUnitClicked && !_this.props.unitLocked)
+                        _this.props.onUnitClicked(); } }, this.props.unit))),
             this.props.useEuler && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__["SliderLineComponent"], { label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__["Tools"].ToDegrees(valueAsNumber), onChange: function (value) { return _this.updateValue(_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__["Tools"].ToRadians(value).toString()); } }))));
     };
     return FloatLineComponent;
@@ -66462,15 +66486,17 @@ var conflictingValuesPlaceholder = "—";
  * @param setter an optional setter function to override the default setter behavior
  * @returns a proxy object that can be passed as a target into the input
  */
-function makeTargetsProxy(targets, onPropertyChangedObservable) {
+function makeTargetsProxy(targets, onPropertyChangedObservable, getProperty) {
+    if (getProperty === void 0) { getProperty = function (target, property) { return target[property]; }; }
     return new Proxy({}, {
         get: function (_, name) {
+            var property = name;
             if (targets.length === 0)
                 return conflictingValuesPlaceholder;
-            var firstValue = targets[0][name];
+            var firstValue = getProperty(targets[0], property);
             for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
                 var target = targets_1[_i];
-                if (target[name] !== firstValue) {
+                if (getProperty(target, property) !== firstValue) {
                     return conflictingValuesPlaceholder;
                 }
             }
@@ -66479,15 +66505,16 @@ function makeTargetsProxy(targets, onPropertyChangedObservable) {
         set: function (_, name, value) {
             if (value === "—")
                 return true;
+            var property = name;
             for (var _i = 0, targets_2 = targets; _i < targets_2.length; _i++) {
                 var target = targets_2[_i];
-                var initialValue = target[name];
-                target[name] = value;
+                var initialValue = target[property];
+                target[property] = value;
                 if (onPropertyChangedObservable) {
                     onPropertyChangedObservable.notifyObservers({
                         object: target,
                         property: name,
-                        value: target[name],
+                        value: target[property],
                         initialValue: initialValue
                     });
                 }
@@ -66580,14 +66607,16 @@ var TextInputLineComponent = /** @class */ (function (_super) {
         var _this = this;
         var value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] ? "" : this.state.value;
         var placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] ? _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] : "";
-        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "textInputLine" },
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine" },
             this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }),
             (!this.props.icon || (this.props.icon && this.props.label != "")) && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label)),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value" + (this.props.noUnderline === true ? " noUnderline" : "") },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: value, onBlur: function () {
                         _this.props.lockObject.lock = false;
                         _this.updateValue((_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "");
-                    }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); }, placeholder: placeholder }))));
+                    }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); }, placeholder: placeholder })),
+            this.props.unit !== undefined && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("button", { className: this.props.unitLocked ? "unit disabled" : "unit", onClick: function () { if (_this.props.onUnitClicked && !_this.props.unitLocked)
+                    _this.props.onUnitClicked(_this.props.unit || ""); } }, this.props.unit)));
     };
     return TextInputLineComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));