@babylonjs/inspector 5.0.0-beta.5 → 5.0.0-beta.9

package/babylon.inspector.bundle.max.js

@@ -45499,10 +45499,11 @@ var TextureLineComponent = /** @class */ (function (_super) {
         this.updatePreview();
     };
     TextureLineComponent.prototype.updatePreview = function () {
+        var _a;
         return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__awaiter"])(this, void 0, void 0, function () {
-            var previewCanvas, texture, size, ratio, width, height, data, context, imageData, castData, e_1;
-            return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__generator"])(this, function (_a) {
-                switch (_a.label) {
+            var previewCanvas, texture, size, ratio, width, height, engine, data, context, imageData, castData, e_1;
+            return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__generator"])(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         previewCanvas = this.canvasRef.current;
                         texture = this.props.texture;
@@ -45510,12 +45511,18 @@ var TextureLineComponent = /** @class */ (function (_super) {
                         ratio = size.width / size.height;
                         width = this.props.width;
                         height = (width / ratio) | 1;
-                        _a.label = 1;
+                        engine = (_a = this.props.texture.getScene()) === null || _a === void 0 ? void 0 : _a.getEngine();
+                        if (engine && height > engine.getCaps().maxTextureSize) {
+                            // the texture.width/texture.height ratio is too small, so use the real width/height dimensions of the texture instead of the canvas width/computed height
+                            width = this.props.texture.getSize().width;
+                            height = this.props.texture.getSize().height;
+                        }
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, 3, , 4]);
+                        _b.trys.push([1, 3, , 4]);
                         return [4 /*yield*/, _textureHelper__WEBPACK_IMPORTED_MODULE_3__["TextureHelper"].GetTextureDataAsync(texture, width, height, this.state.face, this.state.channels, this.props.globalState)];
                     case 2:
-                        data = _a.sent();
+                        data = _b.sent();
                         previewCanvas.width = width;
                         previewCanvas.height = height;
                         context = previewCanvas.getContext("2d");
@@ -45528,7 +45535,7 @@ var TextureLineComponent = /** @class */ (function (_super) {
                         previewCanvas.style.height = height + "px";
                         return [3 /*break*/, 4];
                     case 3:
-                        e_1 = _a.sent();
+                        e_1 = _b.sent();
                         previewCanvas.width = width;
                         previewCanvas.height = height;
                         previewCanvas.style.height = height + "px";
@@ -46743,7 +46750,7 @@ var PropertyGridTabComponent = /** @class */ (function (_super) {
             }
             if (className === "RadioButton") {
                 var radioButton = entity;
-                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_tabs_propertyGrids_gui_radioButtonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_27__["RadioButtonPropertyGridComponent"], { radioButton: radioButton, lockObject: this._lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_tabs_propertyGrids_gui_radioButtonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_27__["RadioButtonPropertyGridComponent"], { radioButtons: [radioButton], lockObject: this._lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
             }
             if (className === "Line") {
                 var line = entity;
@@ -47151,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;
@@ -47163,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({});
                     });
                 }
             }
@@ -48019,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 = [];
@@ -48928,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 () {
@@ -48970,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 () {
@@ -49065,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;
@@ -49106,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();
@@ -49155,7 +49165,7 @@ var GraphComponent = /** @class */ (function (_super) {
             }
         }
         if (frame) {
-            this._frame();
+            this._frameFromActiveKeys();
         }
     };
     GraphComponent.prototype._extractValuesFromKeys = function (keys, dataType, curvesToPushTo, propertyFilter) {
@@ -49504,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);
@@ -49524,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;
@@ -49539,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;
@@ -50707,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;
@@ -50794,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
@@ -50818,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) {
@@ -51017,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;
         }
@@ -51035,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 });
@@ -51170,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 () {
@@ -51213,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;
@@ -51391,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 = "";
     };
@@ -51413,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;
@@ -51622,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) {
@@ -56743,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;
@@ -56785,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 },
@@ -59643,7 +59670,11 @@ var ToolsTabComponent = /** @class */ (function (_super) {
         filesInputAnimation.loadFiles(event);
     };
     ToolsTabComponent.prototype.shouldExport = function (node) {
-        // No skybox
+        // Exclude disabled
+        if (!node.isEnabled()) {
+            return false;
+        }
+        // Exclude skybox
         if (node instanceof _babylonjs_core_Misc_videoRecorder__WEBPACK_IMPORTED_MODULE_5__["Mesh"]) {
             if (node.material) {
                 var material = node.material;
@@ -60229,11 +60260,9 @@ var CanvasGraphComponent = function (props) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CanvasGraphService", function() { return CanvasGraphService; });
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./graphSupportingTypes */ "./components/graph/graphSupportingTypes.ts");
-/* harmony import */ var _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babylonjs/core/Maths/math.scalar */ "@babylonjs/core/Misc/observable");
-/* harmony import */ var _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__);
-
+/* harmony import */ var _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./graphSupportingTypes */ "./components/graph/graphSupportingTypes.ts");
+/* harmony import */ var _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babylonjs/core/Maths/math.scalar */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__);
 
 
 
@@ -60289,6 +60318,8 @@ var drawThrottleTime = 15;
 var maxXDistancePercBetweenLinePoints = 0.1;
 // Color used to draw the rectangle that indicates no collection of data
 var noDataRectangleColor = "#aaaaaa";
+var smoothingFactor = 0.2; // factor to smooth the graph with
+var rangeMargin = 0.1; // extra margin to expand the min/max range on the graph
 /**
  * This function will debounce calls to functions.
  *
@@ -60392,7 +60423,7 @@ var CanvasGraphService = /** @class */ (function () {
                 _this._position = null;
             }
             // Bind the zoom between [minZoom, maxZoom]
-            _this._sizeOfWindow = _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["Scalar"].Clamp(_this._sizeOfWindow - amount, minZoom, maxZoom);
+            _this._sizeOfWindow = _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["Scalar"].Clamp(_this._sizeOfWindow - amount, minZoom, maxZoom);
         };
         /**
          * Initializes the panning object and attaches appropriate listener.
@@ -60427,7 +60458,7 @@ var CanvasGraphService = /** @class */ (function () {
             var itemsDelta = (pixelDelta / pixelsPerItem) | 0;
             var pos = (_a = _this._position) !== null && _a !== void 0 ? _a : _this._getNumberOfSlices() - 1;
             // update our position without allowing the user to pan more than they need to (approximation)
-            _this._position = _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["Scalar"].Clamp(pos - itemsDelta, Math.floor(_this._sizeOfWindow * scaleFactor), _this._getNumberOfSlices() - Math.floor(_this._sizeOfWindow * (1 - scaleFactor)));
+            _this._position = _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["Scalar"].Clamp(pos - itemsDelta, Math.floor(_this._sizeOfWindow * scaleFactor), _this._getNumberOfSlices() - Math.floor(_this._sizeOfWindow * (1 - scaleFactor)));
             if (itemsDelta === 0) {
                 _this._panPosition.delta += pixelDelta;
             }
@@ -60562,7 +60593,7 @@ var CanvasGraphService = /** @class */ (function () {
         this._datasetBounds.end = this._getClosestPointToTimestamp(bufferMaximum) + 1;
         // keep track of largest timestamp value in view!
         this._globalTimeMinMax.max = Math.max(this.datasets.data.at(this.datasets.startingIndices.at(this._datasetBounds.end - 1)), this._globalTimeMinMax.max);
-        var updatedScaleFactor = _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["Scalar"].Clamp((this._globalTimeMinMax.max - this._globalTimeMinMax.min) / (bufferMaximum - this._globalTimeMinMax.min), scaleFactor, 1);
+        var updatedScaleFactor = _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["Scalar"].Clamp((this._globalTimeMinMax.max - this._globalTimeMinMax.min) / (bufferMaximum - this._globalTimeMinMax.min), scaleFactor, 1);
         // we will now set the global maximum to the maximum of the buffer.
         this._globalTimeMinMax.max = bufferMaximum;
         this._drawableArea.top = 0;
@@ -60583,18 +60614,13 @@ var CanvasGraphService = /** @class */ (function () {
             var valueMinMax;
             var prevPoint = _this._prevPointById.get(id);
             var prevValue = _this._prevValueById.get(id);
-            // we have already calculated  the min and max while getting the tickers, so use those.
+            var ticker = false;
             for (var i = 0; i < _this._numberOfTickers; i++) {
                 if (_this._tickerItems[i].id === id) {
-                    valueMinMax = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, _this._tickerItems[i]);
-                    // Extend the min max range by 1% of its total range
-                    var delta = valueMinMax.max - valueMinMax.min;
-                    valueMinMax.min -= 0.01 * delta;
-                    valueMinMax.max += 0.01 * delta;
+                    ticker = true;
                 }
             }
-            // if we could not find the min max object it must be hidden so we skip.
-            if (!valueMinMax) {
+            if (!ticker) {
                 return;
             }
             ctx.beginPath();
@@ -60606,20 +60632,37 @@ var CanvasGraphService = /** @class */ (function () {
             else if (_this._preprocessedTooltipInfo.focusedId !== "") {
                 ctx.globalAlpha = backgroundLineAlpha;
             }
-            var smoothingFactor = 0.2;
+            var values = new Array(_this._datasetBounds.end - _this._datasetBounds.start);
             for (var pointIndex = _this._datasetBounds.start; pointIndex < _this._datasetBounds.end; pointIndex++) {
-                var numPoints = _this.datasets.data.at(_this.datasets.startingIndices.at(pointIndex) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].NumberOfPointsOffset);
+                var numPoints = _this.datasets.data.at(_this.datasets.startingIndices.at(pointIndex) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].NumberOfPointsOffset);
                 if (idOffset >= numPoints) {
                     continue;
                 }
-                var valueIndex = _this.datasets.startingIndices.at(pointIndex) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].SliceDataOffset + idOffset;
-                var timestamp = _this.datasets.data.at(_this.datasets.startingIndices.at(pointIndex));
+                var valueIndex = _this.datasets.startingIndices.at(pointIndex) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].SliceDataOffset + idOffset;
                 var value = _this.datasets.data.at(valueIndex);
                 if (prevValue === undefined) {
                     prevValue = value;
                     _this._prevValueById.set(id, prevValue);
                 }
+                // perform smoothing
                 var smoothedValue = smoothingFactor * value + (1 - smoothingFactor) * prevValue;
+                values[pointIndex - _this._datasetBounds.start] = smoothedValue;
+                if (!valueMinMax) {
+                    valueMinMax = {
+                        min: smoothedValue,
+                        max: smoothedValue
+                    };
+                }
+                _this._prevValueById.set(id, smoothedValue);
+                valueMinMax.min = Math.min(valueMinMax.min, smoothedValue);
+                valueMinMax.max = Math.max(valueMinMax.max, smoothedValue);
+            }
+            var delta = valueMinMax.max - valueMinMax.min;
+            valueMinMax.min -= rangeMargin * delta;
+            valueMinMax.max += rangeMargin * delta;
+            for (var pointIndex = _this._datasetBounds.start; pointIndex < _this._datasetBounds.end; pointIndex++) {
+                var timestamp = _this.datasets.data.at(_this.datasets.startingIndices.at(pointIndex));
+                var smoothedValue = values[pointIndex - _this._datasetBounds.start];
                 var drawableTime = _this._getPixelForNumber(timestamp, _this._globalTimeMinMax, left, right - left, false);
                 var drawableValue = _this._getPixelForNumber(smoothedValue, valueMinMax, top, bottom - top, true);
                 if (prevPoint === undefined) {
@@ -60640,7 +60683,6 @@ var CanvasGraphService = /** @class */ (function () {
                 }
                 prevPoint[0] = drawableTime;
                 prevPoint[1] = drawableValue;
-                _this._prevValueById.set(id, smoothedValue);
             }
             ctx.stroke();
         });
@@ -60665,7 +60707,7 @@ var CanvasGraphService = /** @class */ (function () {
                 return;
             }
             var valueMinMax = _this._getMinMax(bounds, idOffset);
-            var latestValue = _this.datasets.data.at(_this.datasets.startingIndices.at(bounds.end - 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].SliceDataOffset + idOffset);
+            var latestValue = _this.datasets.data.at(_this.datasets.startingIndices.at(bounds.end - 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].SliceDataOffset + idOffset);
             var text = "".concat(id, ": ").concat(latestValue.toFixed(2), " (max: ").concat(valueMinMax.max.toFixed(2), ", min: ").concat(valueMinMax.min.toFixed(2), ")");
             valueMap.set(id, {
                 min: valueMinMax.min,
@@ -60784,16 +60826,16 @@ var CanvasGraphService = /** @class */ (function () {
      */
     CanvasGraphService.prototype._getTimestampUnit = function (timestamp) {
         if (timestamp / msInHour > 1) {
-            return _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Hours;
+            return _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Hours;
         }
         else if (timestamp / msInMinute > 1) {
-            return _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Minutes;
+            return _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Minutes;
         }
         else if (timestamp / msInSecond > 1) {
-            return _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Seconds;
+            return _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Seconds;
         }
         else {
-            return _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Milliseconds;
+            return _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Milliseconds;
         }
     };
     /**
@@ -60804,19 +60846,19 @@ var CanvasGraphService = /** @class */ (function () {
      */
     CanvasGraphService.prototype._parseTimestamp = function (timestamp, intervalUnit) {
         var parsedTimestamp = "";
-        if (intervalUnit >= _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Hours) {
+        if (intervalUnit >= _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Hours) {
             var numHours = Math.floor(timestamp / msInHour);
             timestamp -= numHours * msInHour;
-            parsedTimestamp += "".concat(numHours.toString().padStart(intervalUnit > _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Hours ? 2 : 1, "0"), ":");
+            parsedTimestamp += "".concat(numHours.toString().padStart(intervalUnit > _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Hours ? 2 : 1, "0"), ":");
         }
-        if (intervalUnit >= _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Minutes) {
+        if (intervalUnit >= _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Minutes) {
             var numMinutes = Math.floor(timestamp / msInMinute);
             timestamp -= numMinutes * msInMinute;
-            parsedTimestamp += "".concat(numMinutes.toString().padStart(intervalUnit > _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Minutes ? 2 : 1, "0"), ":");
+            parsedTimestamp += "".concat(numMinutes.toString().padStart(intervalUnit > _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Minutes ? 2 : 1, "0"), ":");
         }
         var numSeconds = Math.floor(timestamp / msInSecond);
         timestamp -= numSeconds * msInSecond;
-        parsedTimestamp += numSeconds.toString().padStart(intervalUnit > _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_1__["TimestampUnit"].Seconds ? 2 : 1, "0");
+        parsedTimestamp += numSeconds.toString().padStart(intervalUnit > _graphSupportingTypes__WEBPACK_IMPORTED_MODULE_0__["TimestampUnit"].Seconds ? 2 : 1, "0");
         if (timestamp > 0) {
             if (parsedTimestamp.length > 0) {
                 parsedTimestamp += ".";
@@ -60895,11 +60937,11 @@ var CanvasGraphService = /** @class */ (function () {
     CanvasGraphService.prototype._getMinMax = function (bounds, offset) {
         var min = Infinity, max = 0;
         for (var i = bounds.start; i < bounds.end; i++) {
-            var numPoints = this.datasets.data.at(this.datasets.startingIndices.at(i) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].NumberOfPointsOffset);
+            var numPoints = this.datasets.data.at(this.datasets.startingIndices.at(i) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].NumberOfPointsOffset);
             if (offset >= numPoints) {
                 continue;
             }
-            var itemIndex = this.datasets.startingIndices.at(i) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].SliceDataOffset + offset;
+            var itemIndex = this.datasets.startingIndices.at(i) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].SliceDataOffset + offset;
             var item = this.datasets.data.at(itemIndex);
             if (item < min) {
                 min = item;
@@ -61035,11 +61077,11 @@ var CanvasGraphService = /** @class */ (function () {
             if (!!((_a = _this.metadata.get(id)) === null || _a === void 0 ? void 0 : _a.hidden)) {
                 return;
             }
-            var numPoints = _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].NumberOfPointsOffset);
+            var numPoints = _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].NumberOfPointsOffset);
             if (idOffset >= numPoints) {
                 return;
             }
-            var valueAtClosestPointIndex = _this.datasets.startingIndices.at(closestIndex) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].SliceDataOffset + idOffset;
+            var valueAtClosestPointIndex = _this.datasets.startingIndices.at(closestIndex) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].SliceDataOffset + idOffset;
             var valueAtClosestPoint = _this.datasets.data.at(valueAtClosestPointIndex);
             var valueMinMax;
             // we would have already calculated  the min and max while getting the tickers, so use those, and get first one.
@@ -61069,17 +61111,17 @@ var CanvasGraphService = /** @class */ (function () {
             var distance = _this._getDistanceFromLine(xForActualTimestamp, valueAtClosestPointYPos, xForActualTimestamp, valueAtClosestPointYPos, pos.xPos - left, adjustedYPos);
             // get the shortest distance between the point and the line segment infront, and line segment behind, store the shorter distance (if shorter than distance between closest data point and mouse).
             if (closestIndex + 1 < _this.datasets.data.itemLength &&
-                _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex + 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].NumberOfPointsOffset) > idOffset) {
+                _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex + 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].NumberOfPointsOffset) > idOffset) {
                 var secondPointTimestamp = _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex + 1));
                 var secondPointX = _this._getPixelForNumber(secondPointTimestamp, _this._globalTimeMinMax, drawableArea.left, drawableArea.right - drawableArea.left, false);
-                var secondPointValue = _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex + 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].SliceDataOffset + idOffset);
+                var secondPointValue = _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex + 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].SliceDataOffset + idOffset);
                 var secondPointY = _this._getPixelForNumber(secondPointValue, valueMinMax, drawableArea.top, drawableArea.bottom - drawableArea.top, true);
                 distance = Math.min(_this._getDistanceFromLine(xForActualTimestamp, valueAtClosestPointYPos, secondPointX, secondPointY, pos.xPos - left, adjustedYPos), distance);
             }
-            if (closestIndex - 1 >= 0 && _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex + 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].NumberOfPointsOffset) > idOffset) {
+            if (closestIndex - 1 >= 0 && _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex + 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].NumberOfPointsOffset) > idOffset) {
                 var secondPointTimestamp = _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex - 1));
                 var secondPointX = _this._getPixelForNumber(secondPointTimestamp, _this._globalTimeMinMax, drawableArea.left, drawableArea.right - drawableArea.left, false);
-                var secondPointValue = _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex - 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerCollector"].SliceDataOffset + idOffset);
+                var secondPointValue = _this.datasets.data.at(_this.datasets.startingIndices.at(closestIndex - 1) + _babylonjs_core_Maths_math_scalar__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerCollector"].SliceDataOffset + idOffset);
                 var secondPointY = _this._getPixelForNumber(secondPointValue, valueMinMax, drawableArea.top, drawableArea.bottom - drawableArea.top, true);
                 distance = Math.min(_this._getDistanceFromLine(xForActualTimestamp, valueAtClosestPointYPos, secondPointX, secondPointY, pos.xPos - left, adjustedYPos), distance);
             }
@@ -64758,6 +64800,9 @@ var ColorPicker = /** @class */ (function (_super) {
         }
         var hsv = this.state.color.toHSV();
         _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color3"].HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);
+        if (this.state.alpha === 0) {
+            this.setState({ alpha: 1 });
+        }
         this.setState({ color: this.state.color });
     };
     ColorPicker.prototype._evaluateHue = function (evt) {
@@ -64811,6 +64856,7 @@ var ColorPicker = /** @class */ (function (_super) {
                             left: "".concat((hsv.r / 360.0) * 100, "%"),
                             border: "1px solid " + colorHexRef,
                         } }))),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-alpha" }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-rgb" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "red" },
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__["ColorComponentEntry"], { label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: function (value) {
@@ -64982,6 +65028,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 _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
+/* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
+
 
 
 
@@ -64992,10 +65040,10 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
         _this._localChange = false;
         _this._uniqueId = CheckBoxLineComponent._UniqueIdSeed++;
         if (_this.props.isSelected) {
-            _this.state = { isSelected: _this.props.isSelected() };
+            _this.state = { isSelected: _this.props.isSelected(), isConflict: false };
         }
         else {
-            _this.state = { isSelected: _this.props.target[_this.props.propertyName] == true };
+            _this.state = { isSelected: _this.props.target[_this.props.propertyName] === true, isConflict: _this.props.target[_this.props.propertyName] === _targetsProxy__WEBPACK_IMPORTED_MODULE_3__["conflictingValuesPlaceholder"] };
         }
         if (_this.props.disabled) {
             _this.state = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, _this.state), { isDisabled: _this.props.disabled });
@@ -65008,7 +65056,10 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
             currentState = nextProps.isSelected();
         }
         else {
-            currentState = nextProps.target[nextProps.propertyName] == true;
+            currentState = nextProps.target[nextProps.propertyName] === true;
+            if (nextProps.target[nextProps.propertyName] === _targetsProxy__WEBPACK_IMPORTED_MODULE_3__["conflictingValuesPlaceholder"]) {
+                nextState.isConflict = true;
+            }
         }
         if (currentState !== nextState.isSelected || this._localChange) {
             nextState.isSelected = currentState;
@@ -65018,7 +65069,7 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
         if (nextProps.disabled !== nextState.isDisabled) {
             return true;
         }
-        return nextProps.label !== this.props.label || nextProps.target !== this.props.target;
+        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;
     };
     CheckBoxLineComponent.prototype.onChange = function () {
         this._localChange = true;
@@ -65034,12 +65085,14 @@ 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();
         }
-        this.setState({ isSelected: !this.state.isSelected });
+        this.setState({ isSelected: !this.state.isSelected, isConflict: false });
     };
     CheckBoxLineComponent.prototype.render = function () {
         var _this = this;
@@ -65049,7 +65102,7 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.iconLabel }, this.props.label),
             this.props.faIcons && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { className: "cbx ".concat(this.props.disabled ? "disabled" : ""), icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: function () { return !_this.props.disabled && _this.onChange(); } }),
             !this.props.faIcons && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "checkBox" },
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkbox", id: "checkbox" + this._uniqueId, className: "cbx hidden", checked: this.state.isSelected, onChange: function () { return _this.onChange(); }, disabled: !!this.props.disabled }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkbox", id: "checkbox" + this._uniqueId, className: "cbx hidden ".concat(this.state.isConflict ? "conflict" : ""), checked: this.state.isSelected, onChange: function () { return _this.onChange(); }, disabled: !!this.props.disabled }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", { htmlFor: "checkbox" + this._uniqueId, className: "lbl".concat(!!this.props.disabled ? " disabled" : "") }))));
     };
     CheckBoxLineComponent._UniqueIdSeed = 0;
@@ -65073,195 +65126,18 @@ __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 _numericInputComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./numericInputComponent */ "./sharedUiComponents/lines/numericInputComponent.tsx");
-/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
-/* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "../../../../node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
-/* harmony import */ var _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @babylonjs/core/Maths/math.color */ "@babylonjs/core/Misc/observable");
-/* harmony import */ var _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./colorPickerComponent */ "./sharedUiComponents/lines/colorPickerComponent.tsx");
-/* harmony import */ var _textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
-
-
-
-
-
+/* harmony import */ var _colorLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
 
 
 
-var copyIcon = __webpack_require__(/*! ./copy.svg */ "./sharedUiComponents/lines/copy.svg");
 var Color3LineComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Color3LineComponent, _super);
-    function Color3LineComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this._localChange = false;
-        var typeName = typeof _this.props.target[_this.props.propertyName];
-        if (typeName === "string") {
-            var colorConverted = _this.convertToColor3(_this.props.target[_this.props.propertyName]);
-            _this.state = { isExpanded: false, color: colorConverted, colorText: _this.props.target[_this.props.propertyName] };
-        }
-        else {
-            _this.state = { isExpanded: false, color: _this.props.target[_this.props.propertyName].clone(), colorText: _this.props.target[_this.props.propertyName].toHexString() };
-        }
-        if (props.isLinear) {
-            _this.state.color.toGammaSpaceToRef(_this.state.color);
-        }
-        props.target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
-        _this._colorPickerOpen = false;
-        return _this;
+    function Color3LineComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Color3LineComponent.prototype.convertToColor3 = function (color) {
-        if (color === "" || color === "transparent") {
-            return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color4"](0, 0, 0, 0);
-        }
-        if (color.substring(0, 1) !== "#" || color.length !== 7) {
-            var d = document.createElement("div");
-            d.style.color = color;
-            document.body.append(d);
-            var rgb = window.getComputedStyle(d).color;
-            document.body.removeChild(d);
-            var rgbArray = rgb
-                .substring(4, rgb.length - 1)
-                .replace(/ /g, "")
-                .split(",");
-            return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color3"](parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255);
-        }
-        return _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color3"].FromHexString(color);
-    };
-    Color3LineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-        var isString = typeof this.props.target[this.props.propertyName] === "string";
-        var currentState = isString
-            ? this.convertToColor3(nextProps.target[nextProps.propertyName])
-            : this.props.isLinear
-                ? nextProps.target[nextProps.propertyName].toGammaSpace()
-                : nextProps.target[nextProps.propertyName];
-        if (!currentState.equals(nextState.color) || this._localChange) {
-            nextState.color = currentState.clone();
-            nextState.colorText = isString ? nextProps.target[nextProps.propertyName] : nextProps.target[nextProps.propertyName].toHexString();
-            this._localChange = false;
-            return true;
-        }
-        return false;
-    };
-    Color3LineComponent.prototype.setPropertyValue = function (newColor, newColorText) {
-        var isString = typeof this.props.target[this.props.propertyName] === "string";
-        if (isString) {
-            this.props.target[this.props.propertyName] = newColorText;
-        }
-        else {
-            this.props.target[this.props.propertyName] = newColor;
-            if (this.props.isLinear) {
-                this.props.target[this.props.propertyName] = newColor.toLinearSpace();
-            }
-        }
-    };
-    Color3LineComponent.prototype.onChange = function (newValue) {
-        this._localChange = true;
-        var newColor = this.convertToColor3(newValue);
-        if (this._colorPickerOpen && this.props.icon) {
-            var savedColor = this.convertToColor3(this._colorStringSaved);
-            if (savedColor.equals(newColor)) {
-                newValue = this._colorStringSaved;
-            }
-        }
-        if (this.props.onPropertyChangedObservable) {
-            this.props.onPropertyChangedObservable.notifyObservers({
-                object: this.props.target,
-                property: this.props.propertyName,
-                value: newColor,
-                initialValue: this.state.color,
-            });
-        }
-        this.setPropertyValue(newColor, newValue);
-        this.setState({ color: newColor, colorText: newValue });
-        if (this.props.onValueChange) {
-            this.props.onValueChange(newValue);
-        }
-    };
-    Color3LineComponent.prototype.switchExpandState = function () {
-        this._localChange = true;
-        this.setState({ isExpanded: !this.state.isExpanded });
-    };
-    Color3LineComponent.prototype.raiseOnPropertyChanged = function (previousValue) {
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: this.state.color,
-            initialValue: previousValue,
-        });
-    };
-    Color3LineComponent.prototype.updateStateR = function (value) {
-        this._localChange = true;
-        var store = this.state.color.clone();
-        this.state.color.r = value;
-        var hex = this.state.color.toHexString();
-        this.setPropertyValue(this.state.color, hex);
-        this.setState({ color: this.state.color, colorText: hex });
-        this.raiseOnPropertyChanged(store);
-    };
-    Color3LineComponent.prototype.updateStateG = function (value) {
-        this._localChange = true;
-        var store = this.state.color.clone();
-        this.state.color.g = value;
-        var hex = this.state.color.toHexString();
-        this.setPropertyValue(this.state.color, hex);
-        this.setState({ color: this.state.color, colorText: hex });
-        this.raiseOnPropertyChanged(store);
-    };
-    Color3LineComponent.prototype.updateStateB = function (value) {
-        this._localChange = true;
-        var store = this.state.color.clone();
-        this.state.color.b = value;
-        var hex = this.state.color.toHexString();
-        this.setPropertyValue(this.state.color, hex);
-        this.setState({ color: this.state.color, colorText: hex });
-        this.raiseOnPropertyChanged(store);
-    };
-    Color3LineComponent.prototype.copyToClipboard = function () {
-        var element = document.createElement("div");
-        element.textContent = this.state.color.toHexString();
-        document.body.appendChild(element);
-        if (window.getSelection) {
-            var range = document.createRange();
-            range.selectNode(element);
-            window.getSelection().removeAllRanges();
-            window.getSelection().addRange(range);
-        }
-        document.execCommand("copy");
-        element.remove();
-    };
-    Color3LineComponent.prototype.convert = function (colorString) {
-        this.onChange(this._colorString);
-    };
     Color3LineComponent.prototype.render = function () {
-        var _this = this;
-        var chevron = this.state.isExpanded ? react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_3__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__["faMinus"] }) : react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_3__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__["faPlus"] });
-        this._colorString = this.state.colorText;
-        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3Line" },
-            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "firstLine", title: this.props.label },
-                this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label" }, this.props.label),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3" },
-                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__["ColorPickerLineComponent"], { linearHint: this.props.isLinear, value: this.state.color, onColorChanged: function (color) {
-                            if (!_this._colorPickerOpen) {
-                                _this._colorStringSaved = _this._colorString;
-                            }
-                            _this._colorPickerOpen = true;
-                            _this.onChange(color);
-                        } })),
-                this.props.icon && this.props.lockObject && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "", target: this, propertyName: "_colorString", onChange: function (newValue) {
-                        _this._colorPickerOpen = false;
-                        _this.convert(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"]("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_2__["NumericInputComponent"], { label: "r", value: this.state.color.r, onChange: function (value) { return _this.updateStateR(value); } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__["NumericInputComponent"], { label: "g", value: this.state.color.g, onChange: function (value) { return _this.updateStateG(value); } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__["NumericInputComponent"], { label: "b", value: this.state.color.b, onChange: function (value) { return _this.updateStateB(value); } })))));
+        var props = this.props;
+        return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorLineComponent__WEBPACK_IMPORTED_MODULE_2__["ColorLineComponent"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ disableAlpha: true }, props));
     };
     return Color3LineComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -65283,12 +65159,49 @@ __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 _colorLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
+
+
+
+var Color4LineComponent = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Color4LineComponent, _super);
+    function Color4LineComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Color4LineComponent.prototype.render = function () {
+        var props = this.props;
+        return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorLineComponent__WEBPACK_IMPORTED_MODULE_2__["ColorLineComponent"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, props));
+    };
+    return Color4LineComponent;
+}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
+
+
+
+/***/ }),
+
+/***/ "./sharedUiComponents/lines/colorLineComponent.tsx":
+/*!*********************************************************!*\
+  !*** ./sharedUiComponents/lines/colorLineComponent.tsx ***!
+  \*********************************************************/
+/*! exports provided: ColorLineComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorLineComponent", function() { return ColorLineComponent; });
+/* 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_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babylonjs/core/Maths/math.color */ "@babylonjs/core/Misc/observable");
 /* harmony import */ var _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lines/numericInputComponent */ "./sharedUiComponents/lines/numericInputComponent.tsx");
+/* harmony import */ var _numericInputComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./numericInputComponent */ "./sharedUiComponents/lines/numericInputComponent.tsx");
 /* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
 /* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "../../../../node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
 /* harmony import */ var _colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./colorPickerComponent */ "./sharedUiComponents/lines/colorPickerComponent.tsx");
+/* harmony import */ var _textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
+/* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
+
+
 
 
 
@@ -65297,105 +65210,128 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var copyIcon = __webpack_require__(/*! ./copy.svg */ "./sharedUiComponents/lines/copy.svg");
-var Color4LineComponent = /** @class */ (function (_super) {
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Color4LineComponent, _super);
-    function Color4LineComponent(props) {
+var emptyColor = new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](0, 0, 0, 0);
+var ColorLineComponent = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ColorLineComponent, _super);
+    function ColorLineComponent(props) {
         var _this = _super.call(this, props) || this;
-        _this._localChange = false;
-        var value = _this.props.target[_this.props.propertyName];
-        var currentColor = value.getClassName() === "Color4" ? value.clone() : new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](value.r, value.g, value.b, 1.0);
-        _this.state = { isExpanded: false, color: currentColor };
+        var colorString = _this.getValueAsString();
+        var color = _this.getValue();
+        _this.state = { isExpanded: false, color: color, colorString: colorString };
         if (props.isLinear) {
             _this.state.color.toGammaSpaceToRef(_this.state.color);
         }
-        props.target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
+        var target = _this.props.target;
+        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
         return _this;
     }
-    Color4LineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-        var value = this.props.target[this.props.propertyName];
-        var currentColor = value.getClassName() === "Color4" ? value : new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](value.r, value.g, value.b, 1.0);
-        if (this.props.isLinear) {
-            currentColor.toGammaSpaceRef(currentColor);
+    ColorLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        var stateString = nextState.colorString;
+        var stateColor = nextState.color;
+        var propsString = this.getValueAsString(nextProps);
+        var propsColor = this.getValue(nextProps);
+        if (stateString !== this.state.colorString || stateColor !== this.state.color) {
+            nextState.colorString = stateString;
+            nextState.color = stateColor;
+            return true;
         }
-        if (!currentColor.equals(nextState.color) || this._localChange) {
-            nextState.color = currentColor.clone();
-            this._localChange = false;
+        if (propsString !== this.state.colorString || propsColor !== this.state.color) {
+            nextState.colorString = propsString;
+            nextState.color = propsColor;
+            return true;
+        }
+        if (nextState.isExpanded !== this.state.isExpanded) {
             return true;
         }
         return false;
     };
-    Color4LineComponent.prototype.setPropertyValue = function (newColor) {
-        this.props.target[this.props.propertyName] = newColor;
+    ColorLineComponent.prototype.getValue = function (props) {
+        if (props === void 0) { props = this.props; }
+        var target = props.target;
+        var property = target[props.propertyName];
+        if (!property)
+            return emptyColor;
+        if (typeof property === "string") {
+            if (property === _targetsProxy__WEBPACK_IMPORTED_MODULE_8__["conflictingValuesPlaceholder"]) {
+                return emptyColor;
+            }
+            return this.convertToColor(property);
+        }
+        else {
+            return property;
+        }
+    };
+    ColorLineComponent.prototype.getValueAsString = function (props) {
+        if (props === void 0) { props = this.props; }
+        var target = props.target;
+        var property = target[props.propertyName];
+        if (!property)
+            return "";
+        if (typeof property === "string") {
+            return property;
+        }
+        else {
+            return property.toHexString();
+        }
+    };
+    ColorLineComponent.prototype.setColorFromString = function (colorString) {
+        if (colorString === _targetsProxy__WEBPACK_IMPORTED_MODULE_8__["conflictingValuesPlaceholder"])
+            return;
+        var color = this.convertToColor(colorString);
         if (this.props.isLinear) {
-            this.props.target[this.props.propertyName] = newColor.toLinearSpace();
+            color = color.toLinearSpace();
         }
+        this.updateColor(color);
+        this.setState({ color: color, colorString: colorString });
     };
-    Color4LineComponent.prototype.onChange = function (newValue) {
-        this._localChange = true;
-        var newColor = _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"].FromHexString(newValue);
+    ColorLineComponent.prototype.setColor = function (color) {
+        if (this.props.isLinear) {
+            color = color.toLinearSpace();
+        }
+        this.updateColor(color);
+        var colorString = this.props.disableAlpha ? this.toColor3(color).toHexString() : color.toHexString();
+        this.setState({ color: color, colorString: colorString });
+    };
+    ColorLineComponent.prototype.updateColor = function (newColor) {
+        // whether to set properties to color3 or color4
+        var setColor = this.props.disableAlpha ? this.toColor3(newColor) : newColor;
+        var target = this.props.target;
+        var initialValue = target[this.props.propertyName];
+        var value = typeof target[this.props.propertyName] === "string" ? setColor.toHexString() : setColor;
+        // make the change
+        target[this.props.propertyName] = value;
+        // notify observers
         if (this.props.onPropertyChangedObservable) {
             this.props.onPropertyChangedObservable.notifyObservers({
-                object: this.props.target,
+                object: target,
                 property: this.props.propertyName,
-                value: newColor,
-                initialValue: this.state.color,
+                value: value,
+                initialValue: initialValue
             });
         }
-        this.setPropertyValue(newColor);
-        this.setState({ color: newColor });
         if (this.props.onChange) {
             this.props.onChange();
         }
     };
-    Color4LineComponent.prototype.switchExpandState = function () {
-        this._localChange = true;
+    ColorLineComponent.prototype.switchExpandState = function () {
         this.setState({ isExpanded: !this.state.isExpanded });
     };
-    Color4LineComponent.prototype.raiseOnPropertyChanged = function (previousValue) {
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: this.state.color,
-            initialValue: previousValue,
-        });
+    ColorLineComponent.prototype.updateStateR = function (value) {
+        this.setColor(new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](value, this.state.color.g, this.state.color.b, this.state.color.a));
     };
-    Color4LineComponent.prototype.updateStateR = function (value) {
-        this._localChange = true;
-        var store = this.state.color.clone();
-        this.state.color.r = value;
-        this.setPropertyValue(this.state.color);
-        this.setState({ color: this.state.color });
-        this.raiseOnPropertyChanged(store);
+    ColorLineComponent.prototype.updateStateG = function (value) {
+        this.setColor(new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](this.state.color.r, value, this.state.color.b, this.state.color.a));
     };
-    Color4LineComponent.prototype.updateStateG = function (value) {
-        this._localChange = true;
-        var store = this.state.color.clone();
-        this.state.color.g = value;
-        this.setPropertyValue(this.state.color);
-        this.setState({ color: this.state.color });
-        this.raiseOnPropertyChanged(store);
+    ColorLineComponent.prototype.updateStateB = function (value) {
+        this.setColor(new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](this.state.color.r, this.state.color.g, value, this.state.color.a));
     };
-    Color4LineComponent.prototype.updateStateB = function (value) {
-        this._localChange = true;
-        var store = this.state.color.clone();
-        this.state.color.b = value;
-        this.setPropertyValue(this.state.color);
-        this.setState({ color: this.state.color });
-        this.raiseOnPropertyChanged(store);
-    };
-    Color4LineComponent.prototype.updateStateA = function (value) {
-        this._localChange = true;
-        var store = this.state.color.clone();
-        this.props.target[this.props.propertyName].a = value;
-        this.state.color.a = value;
-        this.props.target[this.props.propertyName] = this.state.color;
-        this.setState({ color: this.state.color });
-        this.raiseOnPropertyChanged(store);
+    ColorLineComponent.prototype.updateStateA = function (value) {
+        if (this.props.disableAlpha) {
+            return;
+        }
+        this.setColor(new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](this.state.color.r, this.state.color.g, this.state.color.b, value));
     };
-    Color4LineComponent.prototype.copyToClipboard = function () {
+    ColorLineComponent.prototype.copyToClipboard = function () {
         var element = document.createElement("div");
         element.textContent = this.state.color.toHexString();
         document.body.appendChild(element);
@@ -65408,7 +65344,41 @@ var Color4LineComponent = /** @class */ (function (_super) {
         document.execCommand("copy");
         element.remove();
     };
-    Color4LineComponent.prototype.render = function () {
+    Object.defineProperty(ColorLineComponent.prototype, "colorString", {
+        get: function () {
+            return this.state.colorString;
+        },
+        set: function (_) { },
+        enumerable: false,
+        configurable: true
+    });
+    ColorLineComponent.prototype.convertToColor = function (color) {
+        if (color === "" || color === "transparent") {
+            return emptyColor;
+        }
+        if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
+            var d = document.createElement("div");
+            d.style.color = color;
+            document.body.append(d);
+            var rgb = window.getComputedStyle(d).color;
+            document.body.removeChild(d);
+            var rgbArray = rgb
+                .substring(4, rgb.length - 1)
+                .replace(/ /g, "")
+                .split(",");
+            var alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;
+            return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);
+        }
+        if (this.props.disableAlpha) {
+            var color3 = _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color3"].FromHexString(color);
+            return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](color3.r, color3.g, color3.b, 1.0);
+        }
+        return _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"].FromHexString(color);
+    };
+    ColorLineComponent.prototype.toColor3 = function (color) {
+        return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color3"](color.r, color.g, color.b);
+    };
+    ColorLineComponent.prototype.render = function () {
         var _this = this;
         var chevron = this.state.isExpanded ? react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__["faMinus"] }) : react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__["faPlus"] });
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3Line" },
@@ -65416,19 +65386,22 @@ var Color4LineComponent = /** @class */ (function (_super) {
                 this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3" },
-                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__["ColorPickerLineComponent"], { value: this.state.color, onColorChanged: function (color) {
-                            _this.onChange(color);
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__["ColorPickerLineComponent"], { linearHint: this.props.isLinear, value: this.props.disableAlpha ? this.toColor3(this.state.color) : this.state.color, onColorChanged: function (color) {
+                            _this.setColor(_this.convertToColor(color));
                         } })),
+                this.props.icon && this.props.lockObject && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "", target: this, propertyName: "colorString", onChange: function (newValue) {
+                        _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"]("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"](_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "r", value: this.state.color.r, onChange: function (value) { return _this.updateStateR(value); } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "g", value: this.state.color.g, onChange: function (value) { return _this.updateStateG(value); } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "b", value: this.state.color.b, onChange: function (value) { return _this.updateStateB(value); } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "a", value: this.state.color.a, onChange: function (value) { return _this.updateStateA(value); } })))));
+                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); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "g", value: this.state.color.g, onChange: function (value) { return _this.updateStateG(value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "b", value: this.state.color.b, onChange: function (value) { return _this.updateStateB(value); } }),
+                this.props.disableAlpha || react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "a", value: this.state.color.a, onChange: function (value) { return _this.updateStateA(value); } })))));
     };
-    return Color4LineComponent;
+    return ColorLineComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
 
 
@@ -65456,7 +65429,7 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ColorPickerLineComponent, _super);
     function ColorPickerLineComponent(props) {
         var _this = _super.call(this, props) || this;
-        _this.state = { pickerEnabled: false, color: _this.props.value, hex: _this.props.value.toHexString() };
+        _this.state = { pickerEnabled: false, color: _this.props.value, hex: _this.getHexString(props) };
         _this._floatRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
         _this._floatHostRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
         return _this;
@@ -65481,13 +65454,17 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
         }
     };
     ColorPickerLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-        var diffProps = nextProps.value.toHexString() !== this.props.value.toHexString();
+        var diffProps = this.getHexString(nextProps) !== this.getHexString();
         if (diffProps) {
             nextState.color = nextProps.value;
-            nextState.hex = nextProps.value.toHexString();
+            nextState.hex = this.getHexString(nextProps);
         }
         return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
     };
+    ColorPickerLineComponent.prototype.getHexString = function (props) {
+        if (props === void 0) { props = this.props; }
+        return props.value.toHexString();
+    };
     ColorPickerLineComponent.prototype.componentDidUpdate = function () {
         this.syncPositions();
     };
@@ -65496,10 +65473,10 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
     };
     ColorPickerLineComponent.prototype.render = function () {
         var _this = this;
-        var color = this.state.color;
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker" },
             this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
-            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-rect", ref: this._floatHostRef, style: { background: this.state.hex }, onClick: function () { return _this.setState({ pickerEnabled: true }); } }),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-rect-background", ref: this._floatHostRef, onClick: function () { return _this.setState({ pickerEnabled: true }); } },
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-rect", style: { background: this.state.hex } })),
             this.state.pickerEnabled && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-cover", onClick: function (evt) {
                         var _a, _b;
@@ -65509,7 +65486,7 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
                         _this.setState({ pickerEnabled: false });
                     } },
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-float", ref: this._floatRef },
-                        react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"], { color: color, linearhint: this.props.linearHint, onColorChanged: function (color) {
+                        react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"], { color: this.state.color, linearhint: this.props.linearHint, onColorChanged: function (color) {
                                 var hex = color.toHexString();
                                 _this.setState({ hex: hex, color: color });
                                 _this.props.onColorChanged(hex);
@@ -65650,6 +65627,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./sliderLineComponent */ "./sharedUiComponents/lines/sliderLineComponent.tsx");
 /* harmony import */ var _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babylonjs/core/Misc/tools */ "@babylonjs/core/Misc/observable");
 /* harmony import */ var _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
+
 
 
 
@@ -65660,20 +65639,34 @@ var FloatLineComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._localChange = false;
         var currentValue = _this.props.target[_this.props.propertyName];
-        _this.state = { value: currentValue ? (_this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(_this.props.digits || 4)) : "0" };
+        _this.state = { value: _this.getValueString(currentValue) };
         _this._store = currentValue;
         return _this;
     }
     FloatLineComponent.prototype.componentWillUnmount = function () {
         this.unlock();
     };
+    FloatLineComponent.prototype.getValueString = function (value) {
+        if (value) {
+            if (value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"]) {
+                return _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"];
+            }
+            else if (this.props.isInteger) {
+                return value.toFixed(0);
+            }
+            else {
+                return value.toFixed(this.props.digits || 4);
+            }
+        }
+        return "0";
+    };
     FloatLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (this._localChange) {
             this._localChange = false;
             return true;
         }
         var newValue = nextProps.target[nextProps.propertyName];
-        var newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 4)) : "0";
+        var newValueString = this.getValueString(newValue);
         if (newValueString !== nextState.value) {
             nextState.value = newValueString;
             return true;
@@ -65751,6 +65744,8 @@ var FloatLineComponent = /** @class */ (function (_super) {
             valueAsNumber = parseFloat(this.state.value);
         }
         var className = this.props.smallUI ? "short" : "value";
+        var value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"] ? "" : this.state.value;
+        var placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"] ? _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"] : "";
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
             !this.props.useEuler && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine" },
                 this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
@@ -65763,12 +65758,14 @@ var FloatLineComponent = /** @class */ (function (_super) {
                             if (_this.props.onEnter) {
                                 _this.props.onEnter(_this._store);
                             }
-                        }, value: this.state.value, onBlur: function () {
+                        }, value: value, onBlur: function () {
                             _this.unlock();
                             if (_this.props.onEnter) {
                                 _this.props.onEnter(_this._store);
                             }
-                        }, 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;
@@ -66409,6 +66406,8 @@ var SliderLineComponent = /** @class */ (function (_super) {
         return false;
     };
     SliderLineComponent.prototype.onChange = function (newValueString) {
+        if (newValueString === "—")
+            return;
         this._localChange = true;
         var newValue = parseFloat(newValueString);
         if (this.props.useEuler) {
@@ -66465,6 +66464,67 @@ var SliderLineComponent = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./sharedUiComponents/lines/targetsProxy.tsx":
+/*!***************************************************!*\
+  !*** ./sharedUiComponents/lines/targetsProxy.tsx ***!
+  \***************************************************/
+/*! exports provided: conflictingValuesPlaceholder, makeTargetsProxy */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "conflictingValuesPlaceholder", function() { return conflictingValuesPlaceholder; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeTargetsProxy", function() { return makeTargetsProxy; });
+var conflictingValuesPlaceholder = "—";
+/**
+ *
+ * @param propertyName the property that the input changes
+ * @param targets a list of selected targets
+ * @param defaultValue the value that should be returned when two targets have conflicting values
+ * @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, 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 = getProperty(targets[0], property);
+            for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
+                var target = targets_1[_i];
+                if (getProperty(target, property) !== firstValue) {
+                    return conflictingValuesPlaceholder;
+                }
+            }
+            return firstValue;
+        },
+        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[property];
+                target[property] = value;
+                if (onPropertyChangedObservable) {
+                    onPropertyChangedObservable.notifyObservers({
+                        object: target,
+                        property: name,
+                        value: target[property],
+                        initialValue: initialValue
+                    });
+                }
+            }
+            return true;
+        }
+    });
+}
+
+
 /***/ }),
 
 /***/ "./sharedUiComponents/lines/textInputLineComponent.tsx":
@@ -66480,6 +66540,8 @@ __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 _targetsProxy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
+
 
 
 var TextInputLineComponent = /** @class */ (function (_super) {
@@ -66543,14 +66605,18 @@ var TextInputLineComponent = /** @class */ (function (_super) {
     };
     TextInputLineComponent.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "textInputLine" },
+        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: 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: this.state.value, onBlur: function () {
+                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); } }))));
+                    }, 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"]));
@@ -67176,6 +67242,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
 /* harmony import */ var _lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
 /* harmony import */ var _lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../lines/optionsLineComponent */ "./sharedUiComponents/lines/optionsLineComponent.tsx");
+/* harmony import */ var _lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
+
 
 
 
@@ -67190,8 +67258,7 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
     function CommonControlPropertyGridComponent(props) {
         return _super.call(this, props) || this;
     }
-    CommonControlPropertyGridComponent.prototype.renderGridInformation = function () {
-        var control = this.props.control;
+    CommonControlPropertyGridComponent.prototype.renderGridInformation = function (control) {
         if (!control.parent) {
             return null;
         }
@@ -67210,7 +67277,17 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { label: "Column", value: cellInfos[1] })));
     };
     CommonControlPropertyGridComponent.prototype.render = function () {
-        var control = this.props.control;
+        var controls;
+        if (this.props.controls) {
+            controls = this.props.controls;
+        }
+        else if (this.props.control) {
+            controls = [this.props.control];
+        }
+        else {
+            return;
+        }
+        var control = controls[0];
         var horizontalOptions = [
             { label: "Left", value: _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__["Control"].HORIZONTAL_ALIGNMENT_LEFT },
             { label: "Right", value: _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__["Control"].HORIZONTAL_ALIGNMENT_RIGHT },
@@ -67224,41 +67301,41 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "GENERAL" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { label: "Class", value: control.getClassName() }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Name", target: control, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Name", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { label: "Unique ID", value: control.uniqueId.toString() }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__["SliderLineComponent"], { label: "Alpha", target: control, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                control.color !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Color", target: control, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
-                control.background !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Background", target: control, propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "ZIndex", target: control, propertyName: "zIndex", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
-            this.renderGridInformation(),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__["SliderLineComponent"], { label: "Alpha", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                control.color !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Color", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+                control.background !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Background", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "ZIndex", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "zIndex", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+            this.renderGridInformation(control),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "ALIGNMENT" },
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__["OptionsLineComponent"], { label: "Horizontal", options: horizontalOptions, target: control, propertyName: "horizontalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__["OptionsLineComponent"], { label: "Vertical", options: verticalOptions, target: control, propertyName: "verticalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__["OptionsLineComponent"], { label: "Horizontal", options: horizontalOptions, target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "horizontalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__["OptionsLineComponent"], { label: "Vertical", options: verticalOptions, target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "verticalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "POSITION" },
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Left", target: control, propertyName: "left", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Top", target: control, propertyName: "top", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Width", target: control, propertyName: "width", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Height", target: control, propertyName: "height", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Padding left", target: control, propertyName: "paddingLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Padding top", target: control, propertyName: "paddingTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Padding right", target: control, propertyName: "paddingRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Padding bottom", target: control, propertyName: "paddingBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Left", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "left", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Top", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "top", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Width", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "width", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Height", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "height", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Padding left", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "paddingLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Padding top", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "paddingTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Padding right", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "paddingRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Padding bottom", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "paddingBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "TRANSFORMATION", closed: true },
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "ScaleX", target: control, propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "ScaleY", target: control, propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__["SliderLineComponent"], { label: "Rotation", target: control, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Transform center X", target: control, propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Transform center Y", target: control, propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "ScaleX", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "ScaleY", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__["SliderLineComponent"], { label: "Rotation", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Transform center X", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Transform center Y", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "FONT", closed: true },
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Family", target: control, propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Size", target: control, propertyName: "fontSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Weight", target: control, propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Style", target: control, propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Family", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Size", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "fontSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Weight", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Style", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "SHADOWS", closed: true },
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Color", target: control, propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Offset X", target: control, propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Offset Y", target: control, propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Blur", target: control, propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Color", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Offset X", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Offset Y", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Blur", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
     };
     return CommonControlPropertyGridComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -67663,6 +67740,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
 /* harmony import */ var _lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
 /* harmony import */ var _lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
+/* harmony import */ var _lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
+
 
 
 
@@ -67676,14 +67755,14 @@ var RadioButtonPropertyGridComponent = /** @class */ (function (_super) {
         return _super.call(this, props) || this;
     }
     RadioButtonPropertyGridComponent.prototype.render = function () {
-        var radioButton = this.props.radioButton;
+        var radioButtons = this.props.radioButtons;
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
-            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: radioButton, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: radioButtons, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { title: "RADIO BUTTON" },
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Thickness", target: radioButton, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Check size ratio", target: radioButton, propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Group", target: radioButton, propertyName: "group", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__["CheckBoxLineComponent"], { label: "Checked", target: radioButton, propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Thickness", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(radioButtons, this.props.onPropertyChangedObservable), propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Check size ratio", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(radioButtons, this.props.onPropertyChangedObservable), propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Group", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(radioButtons, this.props.onPropertyChangedObservable), propertyName: "group", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__["CheckBoxLineComponent"], { label: "Checked", target: Object(_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(radioButtons, this.props.onPropertyChangedObservable), propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
     };
     return RadioButtonPropertyGridComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));