@babylonjs/inspector 5.0.0-beta.7 → 5.0.0-rc.0

package/babylon.inspector.bundle.max.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-inspector"] = factory(require("@babylonjs/core"), require("@babylonjs/gui"), require("@babylonjs/loaders"), require("@babylonjs/materials"), require("@babylonjs/serializers"));
 	else
 		root["INSPECTOR"] = factory(root["BABYLON"], root["BABYLON"]["GUI"], root["BABYLON"], root["BABYLON"]["MATERIALS"], root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_image__, __WEBPACK_EXTERNAL_MODULE__babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE__babylonjs_materials_grid_gridMaterial__, __WEBPACK_EXTERNAL_MODULE__babylonjs_serializers_glTF_2_0_index__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_control__, __WEBPACK_EXTERNAL_MODULE__babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE__babylonjs_materials_grid_gridMaterial__, __WEBPACK_EXTERNAL_MODULE__babylonjs_serializers_glTF_2_0_index__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -45814,6 +45814,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 var DebugTabComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(DebugTabComponent, _super);
     function DebugTabComponent(props) {
@@ -47158,7 +47159,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 +47171,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({});
                     });
                 }
             }
@@ -48023,9 +48024,11 @@ var RangeSelectorComponent = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Context", function() { return Context; });
-/* 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__);
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Animations/animation */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__);
+
 
+;
 var Context = /** @class */ (function () {
     function Context() {
         this.activeAnimations = [];
@@ -48035,43 +48038,43 @@ var Context = /** @class */ (function () {
         this.referenceMinFrame = 0;
         this.referenceMaxFrame = 100;
         this.focusedInput = false;
-        this.onActiveAnimationChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onActiveKeyPointChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onHostWindowResized = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onSelectAllKeys = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onActiveKeyFrameChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onFrameSet = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onFrameManuallyEntered = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onMainKeyPointSet = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onMainKeyPointMoved = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onValueSet = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onValueManuallyEntered = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onFrameRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onCreateOrUpdateKeyPointRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onFlattenTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onLinearTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onBreakTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onUnifyTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onStepTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onDeleteAnimation = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onGraphMoved = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onGraphScaled = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onRangeUpdated = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onMoveToFrameRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onAnimationStateChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onDeleteKeyActiveKeyPoints = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onSelectionRectangleMoved = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onAnimationsLoaded = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onEditAnimationRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onEditAnimationUIClosed = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onClipLengthIncreased = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onClipLengthDecreased = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onInterpolationModeSet = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onSelectToActivated = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onActiveAnimationChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onActiveKeyPointChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onHostWindowResized = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onSelectAllKeys = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onActiveKeyFrameChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onFrameSet = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onFrameManuallyEntered = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onMainKeyPointSet = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onMainKeyPointMoved = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onValueSet = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onValueManuallyEntered = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onFrameRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onCreateOrUpdateKeyPointRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onFlattenTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onLinearTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onBreakTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onUnifyTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onStepTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onDeleteAnimation = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onGraphMoved = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onGraphScaled = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onRangeUpdated = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onMoveToFrameRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onAnimationStateChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onDeleteKeyActiveKeyPoints = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onSelectionRectangleMoved = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onAnimationsLoaded = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onEditAnimationRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onEditAnimationUIClosed = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onClipLengthIncreased = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onClipLengthDecreased = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onInterpolationModeSet = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onSelectToActivated = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.lockLastFrameValue = false;
         this.lockLastFrameFrame = false;
         // value frame inTangent outTangent
-        this.onActiveKeyDataChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onActiveKeyDataChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
     }
     Context.prototype.prepare = function () {
         this.isPlaying = false;
@@ -48264,6 +48267,13 @@ var Context = /** @class */ (function () {
         }
         return null;
     };
+    Context.prototype.hasActiveQuaternionAnimationKeyPoints = function () {
+        var _a;
+        var activeAnimData = (_a = this.activeKeyPoints) === null || _a === void 0 ? void 0 : _a.map(function (keyPointComponent) { return keyPointComponent.props.curve.animation.dataType; });
+        var quaternionAnimData = activeAnimData === null || activeAnimData === void 0 ? void 0 : activeAnimData.filter(function (type) { return (type === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Animation"].ANIMATIONTYPE_QUATERNION); });
+        var hasActiveQuaternionAnimation = ((quaternionAnimData === null || quaternionAnimData === void 0 ? void 0 : quaternionAnimData.length) || 0) > 0;
+        return hasActiveQuaternionAnimation;
+    };
     return Context;
 }());
 
@@ -48490,14 +48500,15 @@ var CanvasComponent = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Curve", function() { return Curve; });
-/* harmony import */ var _babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Animations/animationKey */ "@babylonjs/core/Misc/observable");
-/* harmony import */ var _babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Animations/animation */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__);
+
 
 
 var Curve = /** @class */ (function () {
     function Curve(color, animation, property, tangentBuilder, setDefaultInTangent, setDefaultOutTangent) {
         this.keys = new Array();
-        this.onDataUpdatedObservable = new _babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onDataUpdatedObservable = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.color = color;
         this.animation = animation;
         this.property = property;
@@ -48511,6 +48522,7 @@ var Curve = /** @class */ (function () {
             return "";
         }
         var pathData = "M".concat(convertX(keys[0].frame), " ").concat(convertY(keys[0].value));
+        var dataType = this.animation.dataType;
         for (var keyIndex = 1; keyIndex < keys.length; keyIndex++) {
             var outTangent = keys[keyIndex - 1].outTangent;
             var inTangent = keys[keyIndex].inTangent;
@@ -48520,12 +48532,12 @@ var Curve = /** @class */ (function () {
             var prevValue = keys[keyIndex - 1].value;
             var frameDist = currentFrame - prevFrame;
             var prevInterpolation = keys[keyIndex - 1].interpolation;
-            if (prevInterpolation === _babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0__["AnimationKeyInterpolation"].STEP) { // Draw a stepped curve
+            if (prevInterpolation === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["AnimationKeyInterpolation"].STEP) { // Draw a stepped curve
                 pathData += "L ".concat(convertX(currentFrame), " ").concat(convertY(prevValue));
                 pathData += "L ".concat(convertX(currentFrame), " ").concat(convertY(currentValue));
                 continue;
             }
-            if (outTangent === undefined && inTangent === undefined) { // Draw a straight line
+            if (outTangent === undefined && inTangent === undefined && dataType !== _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Animation"].ANIMATIONTYPE_QUATERNION) { // Draw a straight line
                 pathData += " L".concat(convertX(currentFrame), " ").concat(convertY(currentValue));
                 continue;
             }
@@ -48721,6 +48733,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babylonjs/core/Animations/animation */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__);
+
 
 
 var CurveComponent = /** @class */ (function (_super) {
@@ -48764,12 +48779,17 @@ var CurveComponent = /** @class */ (function (_super) {
         if (!this.props.context.isChannelEnabled(this.props.curve.animation, this.props.curve.color)) {
             return null;
         }
+        var pathStyle = {
+            stroke: this.props.curve.color,
+            fill: "none",
+            strokeWidth: "1",
+        };
+        if (this.props.curve.animation.dataType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"].ANIMATIONTYPE_QUATERNION) {
+            pathStyle['stroke-dasharray'] = '5';
+            pathStyle['stroke-opacity'] = '0.5';
+        }
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("svg", { style: { cursor: "pointer", overflow: "auto" } },
-            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", { d: this.props.curve.getPathData(this.props.convertX, this.props.convertY), style: {
-                    stroke: this.props.curve.color,
-                    fill: "none",
-                    strokeWidth: "1",
-                } })));
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", { d: this.props.curve.getPathData(this.props.convertX, this.props.convertY), style: pathStyle })));
     };
     return CurveComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -48935,13 +48955,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 +49000,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 () {
@@ -48988,6 +49014,9 @@ var GraphComponent = /** @class */ (function (_super) {
             }
             for (var _i = 0, _a = _this.props.context.activeAnimations; _i < _a.length; _i++) {
                 var currentAnimation = _a[_i];
+                if (currentAnimation.dataType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"].ANIMATIONTYPE_QUATERNION) {
+                    continue;
+                }
                 var keys = currentAnimation.getKeys();
                 var currentFrame = _this.props.context.activeFrame;
                 var indexToAdd = -1;
@@ -49049,10 +49078,6 @@ var GraphComponent = /** @class */ (function (_super) {
                                 derivative = _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Vector3"].Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
                                 break;
                             }
-                            case _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"].ANIMATIONTYPE_QUATERNION: {
-                                derivative = _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Quaternion"].Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
-                                break;
-                            }
                             case _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"].ANIMATIONTYPE_COLOR3:
                                 derivative = _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Color3"].Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
                                 break;
@@ -49072,7 +49097,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 +49138,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 +49183,7 @@ var GraphComponent = /** @class */ (function (_super) {
             }
         }
         if (frame) {
-            this._frame();
+            this._frameFromActiveKeys();
         }
     };
     GraphComponent.prototype._extractValuesFromKeys = function (keys, dataType, curvesToPushTo, propertyFilter) {
@@ -49511,16 +49532,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 +49553,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 +49574,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;
@@ -49797,6 +49833,11 @@ var KeyPointComponent = /** @class */ (function (_super) {
             if (!_this._keyPointSVG.current) {
                 return;
             }
+            var animationType = _this.props.curve.animation.dataType;
+            var isQuaternionAnimation = animationType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_QUATERNION;
+            if (isQuaternionAnimation) {
+                return;
+            }
             var rect2 = _this._keyPointSVG.current.getBoundingClientRect();
             var overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
             if (!_this.props.context.activeKeyPoints) {
@@ -50032,6 +50073,10 @@ var KeyPointComponent = /** @class */ (function (_super) {
             this.props.context.activeKeyPoints = [];
         }
         evt.preventDefault();
+        var isQuaternionAnimation = this.props.curve.animation.dataType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_QUATERNION;
+        if (isQuaternionAnimation) {
+            return;
+        }
         this._select(evt.nativeEvent.ctrlKey);
         this.props.context.onActiveKeyPointChanged.notifyObservers();
         this._pointerIsDown = true;
@@ -50039,15 +50084,15 @@ var KeyPointComponent = /** @class */ (function (_super) {
         this._sourcePointerX = evt.nativeEvent.offsetX;
         this._sourcePointerY = evt.nativeEvent.offsetY;
         var target = evt.nativeEvent.target;
-        if (target.tagName === "image") {
+        if (target.tagName === "image" && !isQuaternionAnimation) {
             this._controlMode = ControlMode.Key;
             this.setState({ tangentSelectedIndex: -1 });
         }
-        else if (target.classList.contains("left-tangent")) {
+        else if (target.classList.contains("left-tangent") && !isQuaternionAnimation) {
             this._controlMode = ControlMode.TangentLeft;
             this.setState({ tangentSelectedIndex: 0 });
         }
-        else if (target.classList.contains("right-tangent")) {
+        else if (target.classList.contains("right-tangent") && !isQuaternionAnimation) {
             this._controlMode = ControlMode.TangentRight;
             this.setState({ tangentSelectedIndex: 1 });
         }
@@ -50083,7 +50128,7 @@ var KeyPointComponent = /** @class */ (function (_super) {
     };
     KeyPointComponent.prototype._onPointerMove = function (evt) {
         var _this = this;
-        if (!this._pointerIsDown || this.state.selectedState !== SelectionState.Selected) {
+        if (!this._pointerIsDown || this.state.selectedState !== SelectionState.Selected || this.props.context.hasActiveQuaternionAnimationKeyPoints()) {
             return;
         }
         if (this._controlMode === ControlMode.Key) {
@@ -50200,6 +50245,7 @@ var KeyPointComponent = /** @class */ (function (_super) {
         }
         var animationType = this.props.curve.animation.dataType;
         var isColorAnimation = animationType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_COLOR3 || animationType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_COLOR4;
+        var isQuaternionAnimation = animationType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_QUATERNION;
         var svgImageIcon = this.state.selectedState === SelectionState.Selected ? keySelected : this.state.selectedState === SelectionState.Siblings ? keyActive : keyInactive;
         var keys = this.props.curve.keys;
         var isLockedTangent = (_a = keys[this.props.keyId].lockedTangent) !== null && _a !== void 0 ? _a : true;
@@ -50229,10 +50275,10 @@ var KeyPointComponent = /** @class */ (function (_super) {
         this._inVec.scaleInPlace(100 * this.props.scale);
         this._outVec.normalize();
         this._outVec.scaleInPlace(100 * this.props.scale);
-        return (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("svg", { ref: this._svgHost, onPointerDown: function (evt) { return _this._onPointerDown(evt); }, onPointerMove: function (evt) { return _this._onPointerMove(evt); }, onPointerUp: function (evt) { return _this._onPointerUp(evt); }, x: this.state.x, y: this.state.y, style: { cursor: "pointer", overflow: "auto" } },
+        return (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("svg", { ref: this._svgHost, onPointerDown: function (evt) { return _this._onPointerDown(evt); }, onPointerMove: function (evt) { return _this._onPointerMove(evt); }, onPointerUp: function (evt) { return _this._onPointerUp(evt); }, x: this.state.x, y: this.state.y, style: { cursor: isQuaternionAnimation ? "auto" : "pointer", overflow: "auto", opacity: isQuaternionAnimation ? "25%" : "100%" } },
             react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("image", { x: "-".concat(8 * this.props.scale), y: "-".concat(8 * this.props.scale), width: "".concat(16 * this.props.scale), height: "".concat(16 * this.props.scale), ref: this._keyPointSVG, href: svgImageIcon }),
             this.state.selectedState === SelectionState.Selected && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("g", null,
-                this.props.keyId !== 0 && !hasStepTangentIn && !isColorAnimation && hasDefinedInTangent && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"](react__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null,
+                this.props.keyId !== 0 && !hasStepTangentIn && !isColorAnimation && !isQuaternionAnimation && hasDefinedInTangent && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"](react__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null,
                     react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("line", { x1: 0, y1: 0, x2: "".concat(this._inVec.x, "px"), y2: "".concat(this._inVec.y, "px"), style: {
                             stroke: this.state.tangentSelectedIndex === 0 || this.state.tangentSelectedIndex === -1 ? "#F9BF00" : "#AAAAAA",
                             strokeWidth: "".concat(1 * this.props.scale),
@@ -50241,7 +50287,7 @@ var KeyPointComponent = /** @class */ (function (_super) {
                     react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("circle", { className: "left-tangent", cx: "".concat(this._inVec.x, "px"), cy: "".concat(this._inVec.y, "px"), r: "".concat(4 * this.props.scale), style: {
                             fill: this.state.tangentSelectedIndex === 0 || this.state.tangentSelectedIndex === -1 ? "#F9BF00" : "#AAAAAA",
                         } }))),
-                this.props.keyId !== keys.length - 1 && !hasStepTangentOut && !isColorAnimation && hasDefinedOutTangent && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"](react__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null,
+                this.props.keyId !== keys.length - 1 && !hasStepTangentOut && !isColorAnimation && !isQuaternionAnimation && hasDefinedOutTangent && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"](react__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null,
                     react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("line", { x1: 0, y1: 0, x2: "".concat(this._outVec.x, "px"), y2: "".concat(this._outVec.y, "px"), style: {
                             stroke: this.state.tangentSelectedIndex === 1 || this.state.tangentSelectedIndex === -1 ? "#F9BF00" : "#AAAAAA",
                             strokeWidth: "".concat(1 * this.props.scale),
@@ -50714,6 +50760,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 +50857,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 +50881,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 +51080,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 +51098,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 +51233,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 +51276,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 +51454,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 +51476,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 +51685,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) {
@@ -51766,7 +51822,8 @@ var TopBarComponent = /** @class */ (function (_super) {
             var numAnims = new Set((_b = _this.props.context.activeKeyPoints) === null || _b === void 0 ? void 0 : _b.map(function (keyPointComponent) { return keyPointComponent.props.curve.animation.uniqueId; })).size;
             var frameControlEnabled = (numKeys === 1 && numAnims === 1) || (numKeys > 1 && numAnims > 1);
             var valueControlEnabled = numKeys > 0;
-            _this.setState({ keyFrameValue: "", keyValue: "", frameControlEnabled: frameControlEnabled, valueControlEnabled: valueControlEnabled });
+            var hasActiveQuaternionAnimation = _this.props.context.hasActiveQuaternionAnimationKeyPoints();
+            _this.setState({ keyFrameValue: "", keyValue: "", frameControlEnabled: frameControlEnabled && !hasActiveQuaternionAnimation, valueControlEnabled: valueControlEnabled && !hasActiveQuaternionAnimation });
         });
         return _this;
     }
@@ -53356,6 +53413,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 var PBRMaterialPropertyGridComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(PBRMaterialPropertyGridComponent, _super);
     function PBRMaterialPropertyGridComponent(props) {
@@ -53406,7 +53465,7 @@ var PBRMaterialPropertyGridComponent = /** @class */ (function (_super) {
             { label: "Anisotropic Tangents", value: 12 },
             { label: "Anisotropic Bitangents", value: 13 },
             // Maps
-            { label: "Albdeo Map", value: 20 },
+            { label: "Albedo Map", value: 20 },
             { label: "Ambient Map", value: 21 },
             { label: "Opacity Map", value: 22 },
             { label: "Emissive Map", value: 23 },
@@ -53842,7 +53901,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/optionsLineComponent */ "./sharedUiComponents/lines/optionsLineComponent.tsx");
 /* harmony import */ var _sharedUiComponents_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/fileButtonLineComponent */ "./sharedUiComponents/lines/fileButtonLineComponent.tsx");
 /* harmony import */ var _sharedUiComponents_lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/valueLineComponent */ "./sharedUiComponents/lines/valueLineComponent.tsx");
-/* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @babylonjs/gui/2D/adtInstrumentation */ "@babylonjs/gui/2D/controls/image");
+/* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @babylonjs/gui/2D/adtInstrumentation */ "@babylonjs/gui/2D/controls/control");
 /* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__);
 /* harmony import */ var _customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../customPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/customPropertyGridComponent.tsx");
 /* harmony import */ var _sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/buttonLineComponent */ "./sharedUiComponents/lines/buttonLineComponent.tsx");
@@ -56199,6 +56258,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 var MeshPropertyGridComponent = /** @class */ (function (_super) {
@@ -56750,13 +56810,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 +56845,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 },
@@ -58486,6 +58538,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 var ScenePropertyGridComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScenePropertyGridComponent, _super);
     function ScenePropertyGridComponent(props) {
@@ -59393,14 +59446,20 @@ var GLTFComponent = /** @class */ (function (_super) {
             ];
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "GLTF LOADER", closed: true, selection: this.props.globalState },
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Always compute bounding box", target: loaderState, propertyName: "alwaysComputeBoundingBox" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Always compute skeleton root node", target: loaderState, propertyName: "alwaysComputeSkeletonRootNode" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], { label: "Animation start mode", options: animationStartMode, target: loaderState, propertyName: "animationStartMode" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Capture performance counters", target: loaderState, propertyName: "capturePerformanceCounters" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Compile materials", target: loaderState, propertyName: "compileMaterials" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Compile shadow generators", target: loaderState, propertyName: "compileShadowGenerators" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], { label: "Coordinate system", options: coordinateSystemMode, target: loaderState, propertyName: "coordinateSystemMode" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Create instances", target: loaderState, propertyName: "createInstances" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Enable logging", target: loaderState, propertyName: "loggingEnabled" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Load all materials", target: loaderState, propertyName: "loadAllMaterials" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { label: "Target FPS", target: loaderState, propertyName: "targetFps", isInteger: true }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Transparency as coverage", target: loaderState, propertyName: "transparencyAsCoverage" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Use clip plane", target: loaderState, propertyName: "useClipPlane" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Use sRGB buffers", target: loaderState, propertyName: "useSRGBBuffers" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Validate", target: loaderState, propertyName: "validate" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__["MessageLineComponent"], { text: "You need to reload your file to see these changes" })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "GLTF EXTENSIONS", closed: true, selection: this.props.globalState },
@@ -60020,14 +60079,20 @@ var GlobalState = /** @class */ (function () {
             EXT_texture_webp: { enabled: true },
         };
         this.glTFLoaderDefaults = {
+            alwaysComputeBoundingBox: false,
+            alwaysComputeSkeletonRootNode: false,
             animationStartMode: typeof _babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderAnimationStartMode"] !== 'undefined' ? _babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderAnimationStartMode"].FIRST : 1,
             capturePerformanceCounters: false,
             compileMaterials: false,
             compileShadowGenerators: false,
             coordinateSystemMode: typeof _babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderCoordinateSystemMode"] !== 'undefined' ? _babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderCoordinateSystemMode"].AUTO : 0,
+            createInstances: true,
+            loadAllMaterials: false,
             loggingEnabled: false,
+            targetFps: 60,
             transparencyAsCoverage: false,
             useClipPlane: false,
+            useSRGBBuffers: true,
         };
         this.glTFLoaderExtensions = {};
         this.blockMutationUpdates = false;
@@ -61433,6 +61498,11 @@ var PopupComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(PopupComponent, _super);
     function PopupComponent(props) {
         var _this = _super.call(this, props) || this;
+        _this.onBeforeUnloadListener = function () {
+            if (_this._window) {
+                _this._window.close();
+            }
+        };
         _this._container = document.createElement("div");
         _this._container.id = _this.props.id;
         _this._window;
@@ -61458,6 +61528,7 @@ var PopupComponent = /** @class */ (function (_super) {
             this._container.appendChild(this._host);
         }
         this._window = _inspector__WEBPACK_IMPORTED_MODULE_3__["Inspector"][windowVariableName];
+        window.addEventListener("beforeunload", this.onBeforeUnloadListener);
         if (this._window) {
             if (onOpen) {
                 onOpen(this._window);
@@ -61490,6 +61561,7 @@ var PopupComponent = /** @class */ (function (_super) {
         }
     };
     PopupComponent.prototype.componentWillUnmount = function () {
+        window.removeEventListener("beforeunload", this.onBeforeUnloadListener);
         if (this._window) {
             this._window.close();
         }
@@ -62142,6 +62214,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _extensionsComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../extensionsComponent */ "./components/sceneExplorer/extensionsComponent.tsx");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _babylonjs_core_Rendering_boundingBoxRenderer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @babylonjs/core/Rendering/boundingBoxRenderer */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Rendering_boundingBoxRenderer__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Rendering_boundingBoxRenderer__WEBPACK_IMPORTED_MODULE_7__);
+
 
 
 
@@ -63135,6 +63210,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+// side effects
+
+
 
 __webpack_require__(/*! ./sceneExplorer.scss */ "./components/sceneExplorer/sceneExplorer.scss");
 var SceneExplorerFilterComponent = /** @class */ (function (_super) {
@@ -64587,7 +64666,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'lodPixelShader';
-var shader = "\n#extension GL_EXT_shader_texture_lod : enable\n\nprecision highp float;\n\nvarying vec2 vUV;\nuniform sampler2D textureSampler;\nuniform float lod;\nuniform vec2 texSize;\nvoid main(void)\n{\n    gl_FragColor = textureLod(textureSampler,vUV,lod);\n}";
+var shader = "\n#extension GL_EXT_shader_texture_lod : enable\n\nprecision highp float;\n\nconst float GammaEncodePowerApprox = 1.0 / 2.2;\n\nvarying vec2 vUV;\nuniform sampler2D textureSampler;\nuniform float lod;\nuniform vec2 texSize;\nuniform bool gamma;\nvoid main(void)\n{\n    gl_FragColor = textureLod(textureSampler,vUV,lod);\n    if (!gamma) {\n        gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(GammaEncodePowerApprox));\n    }\n}";
 _babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0__["Effect"].ShadersStore[name] = shader;
 /** @hidden */
 var lodPixelShader = { name: name, shader: shader };
@@ -64609,7 +64688,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'lodCubePixelShader';
-var shader = "\nprecision highp float;\n\nvarying vec2 vUV;\nuniform samplerCube textureSampler;\nuniform float lod;\nvoid main(void)\n{\n    vec2 uv=vUV*2.0-1.0;\n    #ifdef POSITIVEX\n    gl_FragColor=textureCube(textureSampler,vec3(1.001,uv.y,uv.x),lod);\n    #endif\n    #ifdef NEGATIVEX\n    gl_FragColor=textureCube(textureSampler,vec3(-1.001,uv.y,uv.x),lod);\n    #endif\n    #ifdef POSITIVEY\n    gl_FragColor=textureCube(textureSampler,vec3(uv.y,1.001,uv.x),lod);\n    #endif\n    #ifdef NEGATIVEY\n    gl_FragColor=textureCube(textureSampler,vec3(uv.y,-1.001,uv.x),lod);\n    #endif\n    #ifdef POSITIVEZ\n    gl_FragColor=textureCube(textureSampler,vec3(uv,1.001),lod);\n    #endif\n    #ifdef NEGATIVEZ\n    gl_FragColor=textureCube(textureSampler,vec3(uv,-1.001),lod);\n    #endif\n}";
+var shader = "\nprecision highp float;\n\nconst float GammaEncodePowerApprox = 1.0 / 2.2;\n\nvarying vec2 vUV;\nuniform samplerCube textureSampler;\nuniform float lod;\nuniform bool gamma;\nvoid main(void)\n{\n    vec2 uv=vUV*2.0-1.0;\n    #ifdef POSITIVEX\n    gl_FragColor=textureCube(textureSampler,vec3(1.001,uv.y,uv.x),lod);\n    #endif\n    #ifdef NEGATIVEX\n    gl_FragColor=textureCube(textureSampler,vec3(-1.001,uv.y,uv.x),lod);\n    #endif\n    #ifdef POSITIVEY\n    gl_FragColor=textureCube(textureSampler,vec3(uv.y,1.001,uv.x),lod);\n    #endif\n    #ifdef NEGATIVEY\n    gl_FragColor=textureCube(textureSampler,vec3(uv.y,-1.001,uv.x),lod);\n    #endif\n    #ifdef POSITIVEZ\n    gl_FragColor=textureCube(textureSampler,vec3(uv,1.001),lod);\n    #endif\n    #ifdef NEGATIVEZ\n    gl_FragColor=textureCube(textureSampler,vec3(uv,-1.001),lod);\n    #endif\n    if (!gamma) {\n        gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(GammaEncodePowerApprox));\n    }\n}";
 _babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0__["Effect"].ShadersStore[name] = shader;
 /** @hidden */
 var lodCubePixelShader = { name: name, shader: shader };
@@ -65065,7 +65144,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();
@@ -65371,7 +65452,7 @@ var ColorLineComponent = /** @class */ (function (_super) {
                         _this.setColorFromString(newValue);
                     }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "copy hoverIcon", onClick: function () { return _this.copyToClipboard(); }, title: "Copy to clipboard" },
-                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: copyIcon, alt: "" })),
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: copyIcon, alt: "Copy" })),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "expand hoverIcon", onClick: function () { return _this.switchExpandState(); }, title: "Expand" }, chevron)),
             this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "secondLine" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "r", value: this.state.color.r, onChange: function (value) { return _this.updateStateR(value); } }),
@@ -65741,7 +65822,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;
@@ -65943,6 +66026,59 @@ var IndentedTextLineComponent = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./sharedUiComponents/lines/inputArrowsComponent.tsx":
+/*!***********************************************************!*\
+  !*** ./sharedUiComponents/lines/inputArrowsComponent.tsx ***!
+  \***********************************************************/
+/*! exports provided: InputArrowsComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputArrowsComponent", function() { return InputArrowsComponent; });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var upArrowIcon = __webpack_require__(/*! ./valueUpArrowIcon.svg */ "./sharedUiComponents/lines/valueUpArrowIcon.svg");
+var downArrowIcon = __webpack_require__(/*! ./valueDownArrowIcon.svg */ "./sharedUiComponents/lines/valueDownArrowIcon.svg");
+var InputArrowsComponent = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(InputArrowsComponent, _super);
+    function InputArrowsComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._arrowsRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
+        _this._drag = function (event) {
+            _this.props.incrementValue(event.movementY);
+        };
+        _this._releaseListener = function () {
+            var _a, _b;
+            _this.props.setDragging(false);
+            (_a = _this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.exitPointerLock();
+            window.removeEventListener("pointerup", _this._releaseListener);
+            (_b = _this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener("mousemove", _this._drag);
+        };
+        return _this;
+    }
+    InputArrowsComponent.prototype.render = function () {
+        var _this = this;
+        return react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "arrows", ref: this._arrowsRef, onPointerDown: function (event) {
+                var _a, _b;
+                _this.props.setDragging(true);
+                (_a = _this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.requestPointerLock();
+                window.addEventListener("pointerup", _this._releaseListener);
+                (_b = _this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener("mousemove", _this._drag);
+            }, onDragStart: function (evt) { return evt.preventDefault(); } },
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { className: "upArrowIcon", src: upArrowIcon, alt: "Increase Value" }),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { className: "downArrowIcon", src: downArrowIcon, alt: "Increase Value" }));
+    };
+    return InputArrowsComponent;
+}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
+
+
+
 /***/ }),
 
 /***/ "./sharedUiComponents/lines/lineContainerComponent.tsx":
@@ -66431,7 +66567,7 @@ var SliderLineComponent = /** @class */ (function (_super) {
                 }, onChange: function (evt) {
                     var changed = _this.prepareDataToRead(_this.state.value);
                     _this.onChange(changed);
-                } }),
+                }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "slider" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { className: "range", type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: function (evt) { return _this.onInput(evt.target.value); }, onChange: function (evt) { return _this.onChange(evt.target.value); } }))));
     };
@@ -66462,15 +66598,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 +66617,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
                     });
                 }
@@ -66514,6 +66653,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
+/* harmony import */ var _inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputArrowsComponent */ "./sharedUiComponents/lines/inputArrowsComponent.tsx");
+
 
 
 
@@ -66522,7 +66663,10 @@ var TextInputLineComponent = /** @class */ (function (_super) {
     function TextInputLineComponent(props) {
         var _this = _super.call(this, props) || this;
         _this._localChange = false;
-        _this.state = { value: (_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "" };
+        _this.state = {
+            value: (_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "",
+            dragging: false
+        };
         return _this;
     }
     TextInputLineComponent.prototype.componentWillUnmount = function () {
@@ -66538,6 +66682,8 @@ var TextInputLineComponent = /** @class */ (function (_super) {
             nextState.value = newValue || "";
             return true;
         }
+        if (nextState.dragging != this.state.dragging)
+            return true;
         return false;
     };
     TextInputLineComponent.prototype.raiseOnPropertyChanged = function (newValue, previousValue) {
@@ -66576,18 +66722,45 @@ var TextInputLineComponent = /** @class */ (function (_super) {
         }
         this.raiseOnPropertyChanged(value, store);
     };
+    TextInputLineComponent.prototype.incrementValue = function (amount) {
+        if (this.props.step) {
+            amount *= this.props.step;
+        }
+        if (this.props.arrowsIncrement) {
+            this.props.arrowsIncrement(amount);
+            return;
+        }
+        var currentValue = parseFloat(this.state.value);
+        this.updateValue((currentValue + amount).toFixed(2));
+    };
+    TextInputLineComponent.prototype.onKeyDown = function (event) {
+        if (this.props.arrows) {
+            if (event.key === "ArrowUp") {
+                this.incrementValue(-1);
+                event.preventDefault();
+            }
+            if (event.key === "ArrowDown") {
+                this.incrementValue(1);
+                event.preventDefault();
+            }
+        }
+    };
     TextInputLineComponent.prototype.render = function () {
         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"]("div", { className: "value".concat(this.props.noUnderline === true ? " noUnderline" : "").concat(this.props.arrows ? " hasArrows" : "").concat(this.state.dragging ? " dragging" : "") },
                 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); }, onKeyDown: function (evt) { return _this.onKeyDown(evt); }, placeholder: placeholder }),
+                this.props.arrows &&
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__["InputArrowsComponent"], { incrementValue: function (amount) { return _this.incrementValue(amount); }, setDragging: function (dragging) { return _this.setState({ dragging: dragging }); } })),
+            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"]));
@@ -66648,6 +66821,17 @@ var TextLineComponent = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./sharedUiComponents/lines/valueDownArrowIcon.svg":
+/*!*********************************************************!*\
+  !*** ./sharedUiComponents/lines/valueDownArrowIcon.svg ***!
+  \*********************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M4.09,5.55a.61.61,0,0,1,.85,0l2,2V1.79a.6.6,0,1,1,1.2,0V7.52l2-2a.61.61,0,0,1,.85,0,.6.6,0,0,1,0,.84l-3,3a.6.6,0,0,1-.84,0l-3-3A.6.6,0,0,1,4.09,5.55Z'/%3E%3C/svg%3E"
+
 /***/ }),
 
 /***/ "./sharedUiComponents/lines/valueLineComponent.tsx":
@@ -66683,6 +66867,17 @@ var ValueLineComponent = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./sharedUiComponents/lines/valueUpArrowIcon.svg":
+/*!*******************************************************!*\
+  !*** ./sharedUiComponents/lines/valueUpArrowIcon.svg ***!
+  \*******************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M4.09,9.45a.6.6,0,0,1,0-.84l3-3a.6.6,0,0,1,.84,0l3,3a.6.6,0,0,1,0,.84.61.61,0,0,1-.85,0l-2-2v5.73a.6.6,0,0,1-1.2,0V7.48l-2,2A.61.61,0,0,1,4.09,9.45Z'/%3E%3C/svg%3E"
+
 /***/ }),
 
 /***/ "./sharedUiComponents/lines/vector2LineComponent.tsx":
@@ -67207,7 +67402,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
 /* harmony import */ var _lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
-/* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/controls/image");
+/* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/controls/control");
 /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/sliderLineComponent */ "./sharedUiComponents/lines/sliderLineComponent.tsx");
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
@@ -67523,7 +67718,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent */ "./sharedUiComponents/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
 /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
-/* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/image */ "@babylonjs/gui/2D/controls/image");
+/* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/image */ "@babylonjs/gui/2D/controls/control");
 /* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
 /* harmony import */ var _lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
@@ -67942,7 +68137,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent */ "./sharedUiComponents/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
-/* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/textBlock */ "@babylonjs/gui/2D/controls/image");
+/* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/textBlock */ "@babylonjs/gui/2D/controls/control");
 /* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
 /* harmony import */ var _lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
@@ -68062,7 +68257,7 @@ var TextureHelper = /** @class */ (function () {
                         scene = texture.getScene();
                         engine = scene.getEngine();
                         if (!texture.isCube) {
-                            lodPostProcess = new _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["PostProcess"]("lod", "lod", ["lod"], null, 1.0, null, _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_NEAREST_MIPNEAREST, engine);
+                            lodPostProcess = new _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["PostProcess"]("lod", "lod", ["lod", "gamma"], null, 1.0, null, _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_NEAREST_MIPNEAREST, engine);
                         }
                         else {
                             faceDefines = [
@@ -68073,7 +68268,7 @@ var TextureHelper = /** @class */ (function () {
                                 "#define POSITIVEZ",
                                 "#define NEGATIVEZ",
                             ];
-                            lodPostProcess = new _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["PostProcess"]("lodCube", "lodCube", ["lod"], null, 1.0, null, _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_NEAREST_MIPNEAREST, engine, false, faceDefines[face]);
+                            lodPostProcess = new _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["PostProcess"]("lodCube", "lodCube", ["lod", "gamma"], null, 1.0, null, _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_NEAREST_MIPNEAREST, engine, false, faceDefines[face]);
                         }
                         if (!lodPostProcess.getEffect().isReady()) {
                             // Try again later
@@ -68090,6 +68285,7 @@ var TextureHelper = /** @class */ (function () {
                         lodPostProcess.onApply = function (effect) {
                             effect.setTexture("textureSampler", texture);
                             effect.setFloat("lod", lod);
+                            effect.setBool("gamma", texture.gammaSpace);
                         };
                         internalTexture = texture.getInternalTexture();
                         if (!(rtt.renderTarget && internalTexture)) return [3 /*break*/, 2];
@@ -68291,14 +68487,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__;
 
 /***/ }),
 
-/***/ "@babylonjs/gui/2D/controls/image":
+/***/ "@babylonjs/gui/2D/controls/control":
 /*!***************************************************************************************************************************!*\
   !*** external {"root":["BABYLON","GUI"],"commonjs":"@babylonjs/gui","commonjs2":"@babylonjs/gui","amd":"@babylonjs/gui"} ***!
   \***************************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_image__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_control__;
 
 /***/ }),