@babylonjs/inspector 5.0.0-alpha.63 → 5.0.0-alpha.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/babylon.inspector.bundle.max.js +175 -98
  2. package/babylon.inspector.bundle.max.js.map +1 -1
  3. package/babylon.inspector.module.d.ts +58 -43
  4. package/package.json +7 -7
package/babylon.inspector.bundle.max.js CHANGED
@@ -7,7 +7,7 @@
7
7
  exports["babylonjs-inspector"] = factory(require("@babylonjs/core"), require("@babylonjs/gui"), require("@babylonjs/loaders"), require("@babylonjs/materials"), require("@babylonjs/serializers"));
8
8
  else
9
9
  root["INSPECTOR"] = factory(root["BABYLON"], root["BABYLON"]["GUI"], root["BABYLON"], root["BABYLON"]["MATERIALS"], root["BABYLON"]);
10
- })((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_adtInstrumentation__, __WEBPACK_EXTERNAL_MODULE__babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE__babylonjs_materials_grid_gridMaterial__, __WEBPACK_EXTERNAL_MODULE__babylonjs_serializers_glTF_2_0_index__) {
10
+ })((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_image__, __WEBPACK_EXTERNAL_MODULE__babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE__babylonjs_materials_grid_gridMaterial__, __WEBPACK_EXTERNAL_MODULE__babylonjs_serializers_glTF_2_0_index__) {
11
11
  return /******/ (function(modules) { // webpackBootstrap
12
12
  /******/ // The module cache
13
13
  /******/ var installedModules = {};
@@ -11142,7 +11142,7 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
11142
11142
  var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
11143
11143
  exports = ___CSS_LOADER_API_IMPORT___(false);
11144
11144
  // Module
11145
- exports.push([module.i, "#inspector-host {\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0px; }\n\n#__resizable_base__ {\n display: none; }\n\n#actionTabs {\n background: #333333;\n height: 100%;\n margin: 0;\n padding: 0;\n display: grid;\n grid-template-rows: auto 1fr;\n font: 14px \"Arial\";\n overflow: hidden; }\n #actionTabs .hoverIcon:hover {\n opacity: 0.8; }\n #actionTabs #header {\n height: 30px;\n font-size: 16px;\n color: white;\n background: #222222;\n grid-row: 1;\n text-align: center;\n display: grid;\n grid-template-columns: 30px 1fr 50px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #actionTabs #header #logo {\n grid-column: 1;\n width: 24px;\n height: 24px;\n display: flex;\n align-self: center;\n justify-self: center; }\n #actionTabs #header #back {\n grid-column: 1;\n display: grid;\n align-self: center;\n justify-self: center;\n cursor: pointer; }\n #actionTabs #header #title {\n grid-column: 2;\n display: grid;\n align-items: center;\n text-align: center; }\n #actionTabs #header #commands {\n grid-column: 3;\n display: grid;\n align-items: center;\n grid-template-columns: 1fr 1fr; }\n #actionTabs #header #commands .expand {\n grid-column: 1;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs #header #commands .close {\n grid-column: 2;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs .tabs {\n display: grid;\n grid-row: 2;\n grid-template-rows: 40px 1fr;\n font: 14px \"Arial\";\n overflow: hidden; }\n #actionTabs .tabs .labels {\n grid-row: 1;\n display: flex;\n align-items: center;\n justify-items: center;\n border-bottom: 1px solid #ffffff;\n margin: 0;\n padding: 0; }\n #actionTabs .tabs .labels .label {\n font-size: 24px;\n color: white;\n width: 40px;\n display: flex;\n align-content: center;\n justify-content: center;\n border: 1px solid transparent;\n border-bottom: none;\n background: #333333;\n padding: 5px;\n height: 28px;\n cursor: pointer; }\n #actionTabs .tabs .labels .label.active {\n border-color: #ffffff;\n border-bottom: 2px solid transparent;\n margin-bottom: -2px; }\n #actionTabs .tabs .panes {\n grid-row: 2;\n display: grid;\n grid-template-rows: 100%;\n overflow: hidden; }\n #actionTabs .tabs .panes .infoMessage {\n opacity: 0.5;\n color: white;\n margin: 15px 5px 0px 5px; }\n #actionTabs .tabs .panes .gradient-step {\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 20px 30px 40px auto 20px 30px;\n padding-top: 5px;\n padding-left: 5px;\n padding-bottom: 5px;\n align-items: center; }\n #actionTabs .tabs .panes .gradient-step .step {\n grid-row: 1;\n grid-column: 1; }\n #actionTabs .tabs .panes .gradient-step .color1 {\n height: 100%; }\n #actionTabs .tabs .panes .gradient-step .color2 {\n height: 100%;\n padding-left: 5px; }\n #actionTabs .tabs .panes .gradient-step .factor1 {\n grid-row: 1;\n grid-column: 2;\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .factor2 {\n padding-left: 5px;\n grid-row: 1;\n grid-column: 3;\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .factor2 .grayed {\n background: gray;\n border-color: gray; }\n #actionTabs .tabs .panes .gradient-step .numeric-input {\n width: calc(100% - 5px); }\n #actionTabs .tabs .panes .gradient-step .icon {\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .step-value {\n margin-left: 5px;\n grid-row: 1;\n grid-column: 3;\n text-align: right;\n margin-right: 5px; }\n #actionTabs .tabs .panes .gradient-step .step-slider {\n grid-row: 1;\n grid-column: 4;\n display: grid;\n justify-content: stretch;\n align-content: center;\n margin-right: 12px; }\n #actionTabs .tabs .panes .gradient-step .step-slider input {\n width: 100%; }\n #actionTabs .tabs .panes .gradient-step .step-slider .range:hover {\n opacity: 1; }\n #actionTabs .tabs .panes .gradient-step .step-slider .range {\n -webkit-appearance: none;\n height: 6px;\n background: #d3d3d3;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s; }\n #actionTabs .tabs .panes .gradient-step .step-slider .range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #337ab7;\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .step-slider .range::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #337ab7;\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .gradient-copy {\n grid-row: 1;\n grid-column: 5;\n display: grid;\n align-content: center;\n justify-content: center; }\n #actionTabs .tabs .panes .gradient-step .gradient-copy .img {\n height: 20px;\n width: 20px; }\n #actionTabs .tabs .panes .gradient-step .gradient-copy .img:hover {\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .gradient-delete {\n grid-row: 1;\n grid-column: 6;\n display: grid;\n align-content: center;\n justify-content: center; }\n #actionTabs .tabs .panes .gradient-step .gradient-delete .img {\n height: 20px;\n width: 20px; }\n #actionTabs .tabs .panes .gradient-step .gradient-delete .img:hover {\n cursor: pointer; }\n #actionTabs .tabs .panes .pane {\n color: white;\n overflow-x: hidden;\n overflow-y: auto;\n height: 100%;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #actionTabs .tabs .panes .pane .animation-info {\n border-left: greenyellow 3px solid;\n margin-left: 5px;\n padding-left: 5px !important; }\n #actionTabs .tabs .panes .pane .underline {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); }\n #actionTabs .tabs .panes .pane .textureLinkLine {\n display: grid;\n grid-template-columns: auto 1fr; }\n #actionTabs .tabs .panes .pane .textureLinkLine .debug {\n grid-column: 1;\n margin-left: 5px;\n margin-right: 5px;\n display: block;\n align-items: center;\n justify-items: center;\n cursor: pointer;\n opacity: 0.5; }\n #actionTabs .tabs .panes .pane .textureLinkLine .debug.selected {\n opacity: 1.0; }\n #actionTabs .tabs .panes .pane .textureLinkLine .textLine {\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .textureLinkLine .actionIcon {\n display: inline-block;\n margin-top: 6px;\n margin-right: 4px; }\n #actionTabs .tabs .panes .pane .messageLine {\n text-align: center;\n font-size: 12px;\n font-style: italic;\n opacity: 0.6; }\n #actionTabs .tabs .panes .pane .iconMessageLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 30px 1fr; }\n #actionTabs .tabs .panes .pane .iconMessageLine .icon {\n grid-column: 1;\n display: grid;\n align-items: center;\n justify-items: center; }\n #actionTabs .tabs .panes .pane .iconMessageLine .value {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .color-picker {\n height: calc(100% - 8px);\n margin: 4px;\n width: 100%; }\n #actionTabs .tabs .panes .pane .color-picker .color-rect {\n height: calc(100% - 4px);\n border: 2px white solid;\n cursor: pointer;\n min-height: 18px; }\n #actionTabs .tabs .panes .pane .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n z-index: 100; }\n #actionTabs .tabs .panes .pane .color-picker .color-picker-float {\n position: absolute; }\n #actionTabs .tabs .panes .pane .linkButtonLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto 20px; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link {\n grid-column: 1;\n display: flex;\n align-items: center;\n text-decoration: underline;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button {\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button button {\n background: #222222;\n border: 1px solid #337ab7;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n opacity: 0.9;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button button:hover {\n opacity: 1.0; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button button:active {\n background: #282828; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button button:focus {\n border: 1px solid #337ab7;\n outline: 0px; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-icon {\n grid-column: 3;\n display: grid;\n align-content: center; }\n #actionTabs .tabs .panes .pane .textLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .textLine.indented {\n grid-template-columns: 100%; }\n #actionTabs .tabs .panes .pane .textLine.indented .link-value {\n grid-column: 1;\n text-align: start;\n margin-left: 20px;\n opacity: 0.6;\n max-width: unset; }\n #actionTabs .tabs .panes .pane .textLine.indented .value {\n grid-column: 1;\n text-align: start;\n margin-left: 20px;\n opacity: 0.6;\n max-width: unset; }\n #actionTabs .tabs .panes .pane .textLine.reduced-opacity {\n opacity: 0.6;\n padding-left: 25px; }\n #actionTabs .tabs .panes .pane .textLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .textLine .link-value {\n grid-column: 2;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 7px;\n max-width: 140px;\n text-decoration: underline;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .textLine .value {\n grid-column: 2;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 7px;\n max-width: 200px;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text; }\n #actionTabs .tabs .panes .pane .textLine .value.check {\n color: green; }\n #actionTabs .tabs .panes .pane .textLine .value.uncheck {\n color: red; }\n #actionTabs .tabs .panes .pane .gradient-container {\n margin-top: 3px; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-label {\n height: 30px;\n display: grid;\n align-content: center; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step {\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 25px 50px 55px 40px auto 20px 5px;\n padding-top: 5px;\n padding-left: 5px;\n padding-bottom: 5px;\n align-items: center;\n border-left: orange 3px solid; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .step {\n grid-row: 1;\n grid-column: 1; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .color1 {\n height: 100%; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .color2 {\n height: 100%;\n padding-left: 5px; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .factor1 {\n grid-row: 1;\n grid-column: 2;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .factor2 {\n padding-left: 5px;\n grid-row: 1;\n grid-column: 3;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .factor2 .grayed {\n background: gray;\n border-color: gray; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .numeric-input {\n width: calc(100% - 5px); }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .step-value {\n margin-left: 5px;\n grid-row: 1;\n grid-column: 4;\n text-align: right;\n margin-right: 5px; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .step-slider {\n grid-row: 1;\n grid-column: 5;\n display: grid;\n justify-content: stretch;\n align-content: center;\n margin-right: 5px; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .step-slider input {\n width: 100%; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .gradient-delete {\n grid-row: 1;\n grid-column: 6;\n display: grid;\n align-content: center;\n justify-content: center; }\n #actionTabs .tabs .panes .pane .textInputLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr 120px; }\n #actionTabs .tabs .panes .pane .textInputLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .textInputLine .value {\n display: flex;\n align-items: center;\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .textInputLine .value input {\n width: 110px; }\n #actionTabs .tabs .panes .pane .buttonLine {\n height: 30px;\n display: grid;\n align-items: center;\n justify-items: stretch; }\n #actionTabs .tabs .panes .pane .buttonLine input[type=\"file\"] {\n display: none; }\n #actionTabs .tabs .panes .pane .buttonLine .file-upload {\n background: #222222;\n border: 1px solid #337ab7;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n font-size: 13px;\n opacity: 0.9;\n cursor: pointer;\n text-align: center; }\n #actionTabs .tabs .panes .pane .buttonLine .file-upload:hover {\n opacity: 1.0; }\n #actionTabs .tabs .panes .pane .buttonLine .file-upload:active {\n transform: scale(0.98);\n transform-origin: 0.5 0.5; }\n #actionTabs .tabs .panes .pane .buttonLine button {\n background: #222222;\n border: 1px solid #337ab7;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n opacity: 0.9;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .buttonLine button:hover {\n opacity: 1.0; }\n #actionTabs .tabs .panes .pane .buttonLine button:active {\n background: #282828; }\n #actionTabs .tabs .panes .pane .buttonLine button:focus {\n border: 1px solid #337ab7;\n outline: 0px; }\n #actionTabs .tabs .panes .pane .radioLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr 24px; }\n #actionTabs .tabs .panes .pane .radioLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer {\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .radio {\n grid-column: 2;\n display: none; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .radio:checked + label:before {\n border-color: #337ab7; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .radio:checked + label:after {\n transform: scale(1); }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio {\n display: inline-block;\n height: 14px;\n position: relative;\n padding: 0 24px;\n margin-bottom: 0;\n cursor: pointer;\n vertical-align: bottom; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio:before, #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio:after {\n position: absolute;\n content: '';\n border-radius: 50%;\n transition: all .3s ease;\n transition-property: transform, border-color; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio:before {\n left: 0px;\n top: 0;\n width: 16px;\n height: 16px;\n border: 2px solid white; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio:after {\n top: 6px;\n left: 6px;\n width: 8px;\n height: 8px;\n transform: scale(0);\n background: #337ab7; }\n #actionTabs .tabs .panes .pane .vector3Line {\n padding-left: 2px;\n display: grid; }\n #actionTabs .tabs .panes .pane .vector3Line .firstLine {\n display: grid;\n grid-template-columns: 1fr auto 20px;\n height: 30px; }\n #actionTabs .tabs .panes .pane .vector3Line .firstLine .label {\n grid-column: 1;\n display: flex;\n align-items: center;\n white-space: nowrap;\n overflow: hidden; }\n #actionTabs .tabs .panes .pane .vector3Line .firstLine .vector {\n grid-column: 2;\n display: flex;\n align-items: center;\n text-align: right;\n opacity: 0.8;\n padding-left: 5px; }\n #actionTabs .tabs .panes .pane .vector3Line .firstLine .expand {\n grid-column: 3;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .vector3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .vector3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .vector3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #actionTabs .tabs .panes .pane .vector3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .checkBoxLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .checkBoxLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .lbl {\n position: relative;\n display: block;\n height: 14px;\n width: 34px;\n margin-right: 5px;\n background: #898989;\n border-radius: 100px;\n cursor: pointer;\n transition: all 0.3s ease; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .lbl:after {\n position: absolute;\n left: 3px;\n top: 2px;\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 100px;\n background: #fff;\n box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);\n content: '';\n transition: all 0.15s ease; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .lbl:active:after {\n transform: scale(1.15, 0.85); }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .cbx:checked ~ label {\n background: #337ab7; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .cbx:checked ~ label:after {\n left: 20px;\n background: #164975; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .hidden {\n display: none; }\n #actionTabs .tabs .panes .pane .textureLine {\n display: grid;\n grid-template-rows: 30px auto; }\n #actionTabs .tabs .panes .pane .textureLine .control {\n margin-top: 2px;\n grid-row: 1;\n display: grid;\n grid-template-columns: 1fr 40px 40px 40px 40px 40px 1fr; }\n #actionTabs .tabs .panes .pane .textureLine .control .red {\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .textureLine .control .green {\n grid-column: 3; }\n #actionTabs .tabs .panes .pane .textureLine .control .blue {\n grid-column: 4; }\n #actionTabs .tabs .panes .pane .textureLine .control .alpha {\n grid-column: 5; }\n #actionTabs .tabs .panes .pane .textureLine .control .all {\n grid-column: 6; }\n #actionTabs .tabs .panes .pane .textureLine .control3D {\n margin-top: 2px;\n grid-row: 1;\n display: grid;\n grid-template-columns: 1fr 40px 40px 40px 40px 40px 40px 1fr; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .px {\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .nx {\n grid-column: 3; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .py {\n grid-column: 4; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .ny {\n grid-column: 5; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .pz {\n grid-column: 6; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .nz {\n grid-column: 7; }\n #actionTabs .tabs .panes .pane .textureLine .command {\n border: 1px solid transparent;\n background: transparent;\n color: white; }\n #actionTabs .tabs .panes .pane .textureLine .selected {\n border: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .textureLine .preview {\n grid-row: 2;\n display: grid;\n align-self: center;\n justify-self: center;\n height: 256px;\n width: 256px;\n margin-top: 5px;\n margin-bottom: 5px;\n border: 1px solid white;\n background-size: 32px 32px;\n background-color: white;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgba(1.0,1.0,1.0,0.3)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E\"); }\n #actionTabs .tabs .panes .pane .gltf-extension-property {\n margin-left: 30px;\n border-left: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .floatLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr 120px; }\n #actionTabs .tabs .panes .pane .floatLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .floatLine .value {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .floatLine .value input {\n width: 110px; }\n #actionTabs .tabs .panes .pane .sliderLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 1fr 50px; }\n #actionTabs .tabs .panes .pane .sliderLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .sliderLine .withMargins {\n margin-left: 5px; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine {\n padding-left: 2px; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short input {\n width: 35px; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short input::-webkit-outer-spin-button,\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #actionTabs .tabs .panes .pane .sliderLine .slider {\n grid-column: 3;\n grid-row: 1;\n margin-right: 5px;\n width: 90%;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .sliderLine .slider .range {\n -webkit-appearance: none;\n width: 120px;\n height: 6px;\n background: #d3d3d3;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s; }\n #actionTabs .tabs .panes .pane .sliderLine .slider .range:hover {\n opacity: 1; }\n #actionTabs .tabs .panes .pane .sliderLine .slider .range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #337ab7;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .sliderLine .slider .range::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #337ab7;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .color3Line {\n padding-left: 2px;\n display: grid; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine {\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto 20px 20px; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 {\n grid-column: 2;\n width: 50px;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 input[type=\"color\"] {\n -webkit-appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.5);\n padding: 0;\n width: 30px;\n height: 20px; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 input[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 input[type=\"color\"]::-webkit-color-swatch {\n border: none; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 input {\n margin-right: 5px; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .copy {\n grid-column: 3;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .copy img {\n height: 100%; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .expand {\n grid-column: 4;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .color3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #actionTabs .tabs .panes .pane .color3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .listLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .listLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .listLine .options {\n grid-column: 2;\n display: flex;\n align-items: center;\n margin-right: 5px; }\n #actionTabs .tabs .panes .pane .listLine .options select {\n width: 115px; }\n #actionTabs .tabs .panes .pane .paneContainer {\n margin-top: 3px;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #actionTabs .tabs .panes .pane .paneContainer .paneList {\n border-left: 3px solid transparent; }\n #actionTabs .tabs .panes .pane .paneContainer:hover .paneList {\n border-left: 3px solid rgba(51, 122, 183, 0.8); }\n #actionTabs .tabs .panes .pane .paneContainer:hover .paneContainer-content .header .title {\n border-left: 3px solid #337ab7; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-highlight-border {\n grid-row: 1;\n grid-column: 1;\n opacity: 1;\n border: 3px solid red;\n margin-bottom: -5px;\n z-index: 100;\n transition: opacity 250ms;\n pointer-events: none; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-highlight-border.transparent {\n opacity: 0; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content {\n grid-row: 1;\n grid-column: 1; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .header {\n display: grid;\n grid-template-columns: 1fr auto;\n background: #555555;\n height: 30px;\n padding-right: 5px;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .header .title {\n border-left: 3px solid transparent;\n padding-left: 5px;\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .header .collapse {\n grid-column: 2;\n display: flex;\n align-items: center;\n justify-items: center;\n transform-origin: center; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .header .collapse.closed {\n transform: rotate(180deg); }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .paneList > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .fragment > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n", ""]);
11145
+ exports.push([module.i, "#inspector-host {\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0px; }\n\n#__resizable_base__ {\n display: none; }\n\n#actionTabs {\n background: #333333;\n height: 100%;\n margin: 0;\n padding: 0;\n display: grid;\n grid-template-rows: auto 1fr;\n font: 14px \"Arial\";\n overflow: hidden; }\n #actionTabs .hoverIcon:hover {\n opacity: 0.8; }\n #actionTabs #header {\n height: 30px;\n font-size: 16px;\n color: white;\n background: #222222;\n grid-row: 1;\n text-align: center;\n display: grid;\n grid-template-columns: 30px 1fr 50px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #actionTabs #header #logo {\n grid-column: 1;\n width: 24px;\n height: 24px;\n display: flex;\n align-self: center;\n justify-self: center; }\n #actionTabs #header #back {\n grid-column: 1;\n display: grid;\n align-self: center;\n justify-self: center;\n cursor: pointer; }\n #actionTabs #header #title {\n grid-column: 2;\n display: grid;\n align-items: center;\n text-align: center; }\n #actionTabs #header #commands {\n grid-column: 3;\n display: grid;\n align-items: center;\n grid-template-columns: 1fr 1fr; }\n #actionTabs #header #commands .expand {\n grid-column: 1;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs #header #commands .close {\n grid-column: 2;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs .tabs {\n display: grid;\n grid-row: 2;\n grid-template-rows: 40px 1fr;\n font: 14px \"Arial\";\n overflow: hidden; }\n #actionTabs .tabs .labels {\n grid-row: 1;\n display: flex;\n align-items: center;\n justify-items: center;\n border-bottom: 1px solid #ffffff;\n margin: 0;\n padding: 0; }\n #actionTabs .tabs .labels .label {\n font-size: 24px;\n color: white;\n width: 40px;\n display: flex;\n align-content: center;\n justify-content: center;\n border: 1px solid transparent;\n border-bottom: none;\n background: #333333;\n padding: 5px;\n height: 28px;\n cursor: pointer; }\n #actionTabs .tabs .labels .label.active {\n border-color: #ffffff;\n border-bottom: 2px solid transparent;\n margin-bottom: -2px; }\n #actionTabs .tabs .panes {\n grid-row: 2;\n display: grid;\n grid-template-rows: 100%;\n overflow: hidden; }\n #actionTabs .tabs .panes .infoMessage {\n opacity: 0.5;\n color: white;\n margin: 15px 5px 0px 5px; }\n #actionTabs .tabs .panes .gradient-step {\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 20px 30px 40px auto 20px 30px;\n padding-top: 5px;\n padding-left: 5px;\n padding-bottom: 5px;\n align-items: center; }\n #actionTabs .tabs .panes .gradient-step .step {\n grid-row: 1;\n grid-column: 1; }\n #actionTabs .tabs .panes .gradient-step .color1 {\n height: 100%; }\n #actionTabs .tabs .panes .gradient-step .color2 {\n height: 100%;\n padding-left: 5px; }\n #actionTabs .tabs .panes .gradient-step .factor1 {\n grid-row: 1;\n grid-column: 2;\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .factor2 {\n padding-left: 5px;\n grid-row: 1;\n grid-column: 3;\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .factor2 .grayed {\n background: gray;\n border-color: gray; }\n #actionTabs .tabs .panes .gradient-step .numeric-input {\n width: calc(100% - 5px); }\n #actionTabs .tabs .panes .gradient-step .icon {\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .step-value {\n margin-left: 5px;\n grid-row: 1;\n grid-column: 3;\n text-align: right;\n margin-right: 5px; }\n #actionTabs .tabs .panes .gradient-step .step-slider {\n grid-row: 1;\n grid-column: 4;\n display: grid;\n justify-content: stretch;\n align-content: center;\n margin-right: 12px; }\n #actionTabs .tabs .panes .gradient-step .step-slider input {\n width: 100%; }\n #actionTabs .tabs .panes .gradient-step .step-slider .range:hover {\n opacity: 1; }\n #actionTabs .tabs .panes .gradient-step .step-slider .range {\n -webkit-appearance: none;\n height: 6px;\n background: #d3d3d3;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s; }\n #actionTabs .tabs .panes .gradient-step .step-slider .range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #337ab7;\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .step-slider .range::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #337ab7;\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .gradient-copy {\n grid-row: 1;\n grid-column: 5;\n display: grid;\n align-content: center;\n justify-content: center; }\n #actionTabs .tabs .panes .gradient-step .gradient-copy .img {\n height: 20px;\n width: 20px; }\n #actionTabs .tabs .panes .gradient-step .gradient-copy .img:hover {\n cursor: pointer; }\n #actionTabs .tabs .panes .gradient-step .gradient-delete {\n grid-row: 1;\n grid-column: 6;\n display: grid;\n align-content: center;\n justify-content: center; }\n #actionTabs .tabs .panes .gradient-step .gradient-delete .img {\n height: 20px;\n width: 20px; }\n #actionTabs .tabs .panes .gradient-step .gradient-delete .img:hover {\n cursor: pointer; }\n #actionTabs .tabs .panes .pane {\n color: white;\n overflow-x: hidden;\n overflow-y: auto;\n height: 100%;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #actionTabs .tabs .panes .pane .animation-info {\n border-left: greenyellow 3px solid;\n margin-left: 5px;\n padding-left: 5px !important; }\n #actionTabs .tabs .panes .pane .underline {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); }\n #actionTabs .tabs .panes .pane .textureLinkLine {\n display: grid;\n grid-template-columns: auto 1fr; }\n #actionTabs .tabs .panes .pane .textureLinkLine .debug {\n grid-column: 1;\n margin-left: 5px;\n margin-right: 5px;\n display: block;\n align-items: center;\n justify-items: center;\n cursor: pointer;\n opacity: 0.5; }\n #actionTabs .tabs .panes .pane .textureLinkLine .debug.selected {\n opacity: 1.0; }\n #actionTabs .tabs .panes .pane .textureLinkLine .textLine {\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .textureLinkLine .actionIcon {\n display: inline-block;\n margin-top: 6px;\n margin-right: 4px; }\n #actionTabs .tabs .panes .pane .messageLine {\n text-align: center;\n font-size: 12px;\n font-style: italic;\n opacity: 0.6; }\n #actionTabs .tabs .panes .pane .iconMessageLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 30px 1fr; }\n #actionTabs .tabs .panes .pane .iconMessageLine .icon {\n grid-column: 1;\n display: grid;\n align-items: center;\n justify-items: center; }\n #actionTabs .tabs .panes .pane .iconMessageLine .value {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .color-picker {\n height: calc(100% - 8px);\n margin: 4px;\n width: 100%; }\n #actionTabs .tabs .panes .pane .color-picker .color-rect {\n height: calc(100% - 4px);\n border: 2px white solid;\n cursor: pointer;\n min-height: 18px; }\n #actionTabs .tabs .panes .pane .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n z-index: 100; }\n #actionTabs .tabs .panes .pane .color-picker .color-picker-float {\n position: absolute; }\n #actionTabs .tabs .panes .pane .linkButtonLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto 20px; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link {\n grid-column: 1;\n display: flex;\n align-items: center;\n text-decoration: underline;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button {\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button button {\n background: #222222;\n border: 1px solid #337ab7;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n opacity: 0.9;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button button:hover {\n opacity: 1.0; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button button:active {\n background: #282828; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-button button:focus {\n border: 1px solid #337ab7;\n outline: 0px; }\n #actionTabs .tabs .panes .pane .linkButtonLine .link-icon {\n grid-column: 3;\n display: grid;\n align-content: center; }\n #actionTabs .tabs .panes .pane .textLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .textLine.indented {\n grid-template-columns: 100%; }\n #actionTabs .tabs .panes .pane .textLine.indented .link-value {\n grid-column: 1;\n text-align: start;\n margin-left: 20px;\n opacity: 0.6;\n max-width: unset; }\n #actionTabs .tabs .panes .pane .textLine.indented .value {\n grid-column: 1;\n text-align: start;\n margin-left: 20px;\n opacity: 0.6;\n max-width: unset; }\n #actionTabs .tabs .panes .pane .textLine.reduced-opacity {\n opacity: 0.6;\n padding-left: 25px; }\n #actionTabs .tabs .panes .pane .textLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .textLine .link-value {\n grid-column: 2;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 7px;\n max-width: 140px;\n text-decoration: underline;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .textLine .value {\n grid-column: 2;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 7px;\n max-width: 200px;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text; }\n #actionTabs .tabs .panes .pane .textLine .value.check {\n color: green; }\n #actionTabs .tabs .panes .pane .textLine .value.uncheck {\n color: red; }\n #actionTabs .tabs .panes .pane .gradient-container {\n margin-top: 3px; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-label {\n height: 30px;\n display: grid;\n align-content: center; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step {\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 25px 50px 55px 40px auto 20px 5px;\n padding-top: 5px;\n padding-left: 5px;\n padding-bottom: 5px;\n align-items: center;\n border-left: orange 3px solid; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .step {\n grid-row: 1;\n grid-column: 1; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .color1 {\n height: 100%; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .color2 {\n height: 100%;\n padding-left: 5px; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .factor1 {\n grid-row: 1;\n grid-column: 2;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .factor2 {\n padding-left: 5px;\n grid-row: 1;\n grid-column: 3;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .factor2 .grayed {\n background: gray;\n border-color: gray; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .numeric-input {\n width: calc(100% - 5px); }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .step-value {\n margin-left: 5px;\n grid-row: 1;\n grid-column: 4;\n text-align: right;\n margin-right: 5px; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .step-slider {\n grid-row: 1;\n grid-column: 5;\n display: grid;\n justify-content: stretch;\n align-content: center;\n margin-right: 5px; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .step-slider input {\n width: 100%; }\n #actionTabs .tabs .panes .pane .gradient-container .gradient-step .gradient-delete {\n grid-row: 1;\n grid-column: 6;\n display: grid;\n align-content: center;\n justify-content: center; }\n #actionTabs .tabs .panes .pane .textInputLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr 120px; }\n #actionTabs .tabs .panes .pane .textInputLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .textInputLine .value {\n display: flex;\n align-items: center;\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .textInputLine .value input {\n width: 110px; }\n #actionTabs .tabs .panes .pane .buttonLine {\n height: 30px;\n display: grid;\n align-items: center;\n justify-items: stretch; }\n #actionTabs .tabs .panes .pane .buttonLine input[type=\"file\"] {\n display: none; }\n #actionTabs .tabs .panes .pane .buttonLine .file-upload {\n background: #222222;\n border: 1px solid #337ab7;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n font-size: 13px;\n opacity: 0.9;\n cursor: pointer;\n text-align: center; }\n #actionTabs .tabs .panes .pane .buttonLine .file-upload:hover {\n opacity: 1.0; }\n #actionTabs .tabs .panes .pane .buttonLine .file-upload:active {\n transform: scale(0.98);\n transform-origin: 0.5 0.5; }\n #actionTabs .tabs .panes .pane .buttonLine button {\n background: #222222;\n border: 1px solid #337ab7;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n opacity: 0.9;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .buttonLine button:hover {\n opacity: 1.0; }\n #actionTabs .tabs .panes .pane .buttonLine button:active {\n background: #282828; }\n #actionTabs .tabs .panes .pane .buttonLine button:focus {\n border: 1px solid #337ab7;\n outline: 0px; }\n #actionTabs .tabs .panes .pane .radioLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr 24px; }\n #actionTabs .tabs .panes .pane .radioLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer {\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .radio {\n grid-column: 2;\n display: none; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .radio:checked + label:before {\n border-color: #337ab7; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .radio:checked + label:after {\n transform: scale(1); }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio {\n display: inline-block;\n height: 14px;\n position: relative;\n padding: 0 24px;\n margin-bottom: 0;\n cursor: pointer;\n vertical-align: bottom; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio:before, #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio:after {\n position: absolute;\n content: '';\n border-radius: 50%;\n transition: all .3s ease;\n transition-property: transform, border-color; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio:before {\n left: 0px;\n top: 0;\n width: 16px;\n height: 16px;\n border: 2px solid white; }\n #actionTabs .tabs .panes .pane .radioLine .radioContainer .labelForRadio:after {\n top: 6px;\n left: 6px;\n width: 8px;\n height: 8px;\n transform: scale(0);\n background: #337ab7; }\n #actionTabs .tabs .panes .pane .vector3Line {\n padding-left: 2px;\n display: grid; }\n #actionTabs .tabs .panes .pane .vector3Line .firstLine {\n display: grid;\n grid-template-columns: 1fr auto 20px;\n height: 30px; }\n #actionTabs .tabs .panes .pane .vector3Line .firstLine .label {\n grid-column: 1;\n display: flex;\n align-items: center;\n white-space: nowrap;\n overflow: hidden; }\n #actionTabs .tabs .panes .pane .vector3Line .firstLine .vector {\n grid-column: 2;\n display: flex;\n align-items: center;\n text-align: right;\n opacity: 0.8;\n padding-left: 5px; }\n #actionTabs .tabs .panes .pane .vector3Line .firstLine .expand {\n grid-column: 3;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .vector3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .vector3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .vector3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #actionTabs .tabs .panes .pane .vector3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .checkBoxLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .checkBoxLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .lbl {\n position: relative;\n display: block;\n height: 14px;\n width: 34px;\n margin-right: 5px;\n background: #898989;\n border-radius: 100px;\n cursor: pointer;\n transition: all 0.3s ease; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .lbl:after {\n position: absolute;\n left: 3px;\n top: 2px;\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 100px;\n background: #fff;\n box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);\n content: '';\n transition: all 0.15s ease; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .lbl:active:after {\n transform: scale(1.15, 0.85); }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .cbx:checked ~ label {\n background: #337ab7; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .cbx:checked ~ label:after {\n left: 20px;\n background: #164975; }\n #actionTabs .tabs .panes .pane .checkBoxLine .checkBox .hidden {\n display: none; }\n #actionTabs .tabs .panes .pane .textureLine {\n display: grid;\n grid-template-rows: 30px auto; }\n #actionTabs .tabs .panes .pane .textureLine .control {\n margin-top: 2px;\n grid-row: 1;\n display: grid;\n grid-template-columns: 1fr 40px 40px 40px 40px 40px 1fr; }\n #actionTabs .tabs .panes .pane .textureLine .control .red {\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .textureLine .control .green {\n grid-column: 3; }\n #actionTabs .tabs .panes .pane .textureLine .control .blue {\n grid-column: 4; }\n #actionTabs .tabs .panes .pane .textureLine .control .alpha {\n grid-column: 5; }\n #actionTabs .tabs .panes .pane .textureLine .control .all {\n grid-column: 6; }\n #actionTabs .tabs .panes .pane .textureLine .control3D {\n margin-top: 2px;\n grid-row: 1;\n display: grid;\n grid-template-columns: 1fr 40px 40px 40px 40px 40px 40px 1fr; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .px {\n grid-column: 2; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .nx {\n grid-column: 3; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .py {\n grid-column: 4; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .ny {\n grid-column: 5; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .pz {\n grid-column: 6; }\n #actionTabs .tabs .panes .pane .textureLine .control3D .nz {\n grid-column: 7; }\n #actionTabs .tabs .panes .pane .textureLine .command {\n border: 1px solid transparent;\n background: transparent;\n color: white; }\n #actionTabs .tabs .panes .pane .textureLine .selected {\n border: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .textureLine .preview {\n grid-row: 2;\n display: grid;\n align-self: center;\n justify-self: center;\n height: 256px;\n width: 256px;\n margin-top: 5px;\n margin-bottom: 5px;\n border: 1px solid white;\n background-size: 32px 32px;\n background-color: white;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgba(1.0,1.0,1.0,0.3)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E\"); }\n #actionTabs .tabs .panes .pane .gltf-extension-property {\n margin-left: 30px;\n border-left: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .floatLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr 120px; }\n #actionTabs .tabs .panes .pane .floatLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .floatLine .value {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .floatLine .value input {\n width: 110px; }\n #actionTabs .tabs .panes .pane .sliderLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 1fr 50px auto; }\n #actionTabs .tabs .panes .pane .sliderLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .sliderLine .withMargins {\n margin-left: 5px; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine {\n padding-left: 2px; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short input {\n width: 35px; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short input::-webkit-outer-spin-button,\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #actionTabs .tabs .panes .pane .sliderLine .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #actionTabs .tabs .panes .pane .sliderLine .slider {\n grid-column: 3;\n grid-row: 1;\n margin-right: 5px;\n width: 90%;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .sliderLine .slider .range {\n -webkit-appearance: none;\n width: 100%;\n height: 6px;\n background: #d3d3d3;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s; }\n #actionTabs .tabs .panes .pane .sliderLine .slider .range:hover {\n opacity: 1; }\n #actionTabs .tabs .panes .pane .sliderLine .slider .range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #337ab7;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .sliderLine .slider .range::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #337ab7;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .color3Line {\n padding-left: 2px;\n display: grid; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine {\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto 20px 20px; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 {\n grid-column: 2;\n width: 50px;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 input[type=\"color\"] {\n -webkit-appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.5);\n padding: 0;\n width: 30px;\n height: 20px; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 input[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 input[type=\"color\"]::-webkit-color-swatch {\n border: none; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .color3 input {\n margin-right: 5px; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .copy {\n grid-column: 3;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .copy img {\n height: 100%; }\n #actionTabs .tabs .panes .pane .color3Line .firstLine .expand {\n grid-column: 4;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .color3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #actionTabs .tabs .panes .pane .color3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #actionTabs .tabs .panes .pane .listLine {\n padding-left: 2px;\n height: 30px;\n display: grid;\n grid-template-columns: 1fr auto; }\n #actionTabs .tabs .panes .pane .listLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .listLine .options {\n grid-column: 2;\n display: flex;\n align-items: center;\n margin-right: 5px; }\n #actionTabs .tabs .panes .pane .listLine .options select {\n width: 115px; }\n #actionTabs .tabs .panes .pane .paneContainer {\n margin-top: 3px;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #actionTabs .tabs .panes .pane .paneContainer .paneList {\n border-left: 3px solid transparent; }\n #actionTabs .tabs .panes .pane .paneContainer:hover .paneList {\n border-left: 3px solid rgba(51, 122, 183, 0.8); }\n #actionTabs .tabs .panes .pane .paneContainer:hover .paneContainer-content .header .title {\n border-left: 3px solid #337ab7; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-highlight-border {\n grid-row: 1;\n grid-column: 1;\n opacity: 1;\n border: 3px solid red;\n margin-bottom: -5px;\n z-index: 100;\n transition: opacity 250ms;\n pointer-events: none; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-highlight-border.transparent {\n opacity: 0; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content {\n grid-row: 1;\n grid-column: 1; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .header {\n display: grid;\n grid-template-columns: 1fr auto;\n background: #555555;\n height: 30px;\n padding-right: 5px;\n cursor: pointer; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .header .title {\n border-left: 3px solid transparent;\n padding-left: 5px;\n grid-column: 1;\n display: flex;\n align-items: center; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .header .collapse {\n grid-column: 2;\n display: flex;\n align-items: center;\n justify-items: center;\n transform-origin: center; }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .header .collapse.closed {\n transform: rotate(180deg); }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .paneList > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #actionTabs .tabs .panes .pane .paneContainer .paneContainer-content .fragment > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n", ""]);
11146
11146
  // Exports
11147
11147
  module.exports = exports;
11148
11148
 
@@ -11160,7 +11160,7 @@ module.exports = exports;
11160
11160
  var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../../../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
11161
11161
  exports = ___CSS_LOADER_API_IMPORT___(false);
11162
11162
  // Module
11163
- exports.push([module.i, "#performance-viewer {\n display: grid;\n height: 100%;\n width: 100%;\n grid-template-columns: 25% 75%;\n grid-template-rows: 30px;\n grid-template-areas: \". liveButton\"\r \"sidebar graph\"; }\n #performance-viewer .performancePlayheadButton {\n grid-area: liveButton;\n height: 30px;\n width: 100px;\n justify-self: right;\n background-color: #dcdfe1;\n color: #2e3f47;\n outline: 2px #2e3f47;\n margin: 5px;\n position: absolute;\n bottom: 10px;\n right: 10px; }\n #performance-viewer #performance-viewer-graph {\n grid-area: graph; }\n #performance-viewer #performance-viewer-sidebar {\n grid-area: sidebar;\n display: flex;\n flex-direction: column; }\n #performance-viewer #performance-viewer-sidebar .header {\n color: white;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n padding: 5 0; }\n #performance-viewer #performance-viewer-sidebar .version-header {\n background-color: darkslategray; }\n #performance-viewer #performance-viewer-sidebar .category-header {\n background-color: royalblue; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item:nth-child(odd) {\n background-color: lightsteelblue; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item:nth-child(even) {\n background-color: lightgrey; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item {\n display: inline-flex;\n flex-direction: row;\n width: 100%;\n align-items: center; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item .sidebar-item-label {\n width: 100%; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item .color-picker {\n height: calc(100% - 8px);\n margin: 4px;\n width: 100%; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item .color-picker .color-rect {\n height: calc(100% - 4px);\n border: 2px white solid;\n cursor: pointer;\n min-height: 18px; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n z-index: 100; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item .color-picker .color-picker-float {\n position: absolute; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item .color-picker .color-picker-float .color-picker-container {\n width: 200px; }\n", ""]);
11163
+ exports.push([module.i, "#performance-viewer {\n display: grid;\n height: 100%;\n width: 100%;\n grid-template-columns: 25% 75%;\n font-family: 'acumin-pro-condensed'; }\n #performance-viewer .performancePlayheadButton {\n grid-area: liveButton;\n height: 30px;\n width: 100px;\n justify-self: right;\n background-color: #dcdfe1;\n color: #2e3f47;\n outline: 2px #2e3f47;\n margin: 5px;\n position: absolute;\n top: 10px;\n right: 10px; }\n #performance-viewer #performance-viewer-sidebar {\n display: flex;\n flex-direction: column;\n overflow-y: scroll;\n border: 2px solid gray; }\n #performance-viewer #performance-viewer-sidebar .sidebar-item {\n display: grid;\n width: 100%;\n align-items: center;\n padding: 5px 0px; }\n #performance-viewer #performance-viewer-sidebar .header {\n color: white;\n grid-template-columns: 10px 9fr 1fr 10px; }\n #performance-viewer #performance-viewer-sidebar .header .category {\n grid-column: 2; }\n #performance-viewer #performance-viewer-sidebar .header .value {\n grid-column: 3; }\n #performance-viewer #performance-viewer-sidebar .version-header {\n background-color: #2e3f47;\n color: white;\n grid-template-columns: 10px 1fr 1fr 10px;\n font-size: smaller; }\n #performance-viewer #performance-viewer-sidebar .version-header .category {\n grid-column: 2; }\n #performance-viewer #performance-viewer-sidebar .version-header .value {\n grid-column: 3;\n display: flex;\n justify-content: end; }\n #performance-viewer #performance-viewer-sidebar .category-header {\n background-color: #4a5960;\n text-transform: uppercase;\n font-size: smaller; }\n #performance-viewer #performance-viewer-sidebar .measure {\n color: black;\n grid-template-columns: 10px 6fr 1fr; }\n #performance-viewer #performance-viewer-sidebar .measure .category {\n display: grid;\n grid-template-columns: 14px 4px 14px 6px 1fr;\n grid-column: 2;\n align-items: center; }\n #performance-viewer #performance-viewer-sidebar .measure .category .color-picker {\n grid-column: 3; }\n #performance-viewer #performance-viewer-sidebar .measure .category .sidebar-item-label {\n grid-column: 5; }\n #performance-viewer #performance-viewer-sidebar .measure .value {\n grid-column: 3; }\n #performance-viewer #performance-viewer-sidebar .measure:nth-child(odd) {\n background-color: #dcdfe1; }\n #performance-viewer #performance-viewer-sidebar .measure:nth-child(even) {\n background-color: #ebedee; }\n #performance-viewer #performance-viewer-sidebar .checkBoxLine {\n color: white;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center; }\n #performance-viewer #performance-viewer-sidebar .checkBoxLine .disabled {\n color: gray; }\n #performance-viewer #performance-viewer-sidebar .color-picker {\n width: 100%; }\n #performance-viewer #performance-viewer-sidebar .color-picker .color-rect {\n height: 14px;\n width: 14px;\n cursor: pointer; }\n #performance-viewer #performance-viewer-sidebar .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n z-index: 100; }\n #performance-viewer #performance-viewer-sidebar .color-picker .color-picker-float {\n position: absolute; }\n #performance-viewer #performance-viewer-sidebar .color-picker .color-picker-float .color-picker-container {\n width: 200px; }\n", ""]);
11164
11164
  // Exports
11165
11165
  module.exports = exports;
11166
11166
 
@@ -45951,6 +45951,7 @@ __webpack_require__.r(__webpack_exports__);
45951
45951
 
45952
45952
 
45953
45953
 
45954
+
45954
45955
  __webpack_require__(/*! ./scss/performanceViewer.scss */ "./components/actionTabs/tabs/performanceViewer/scss/performanceViewer.scss");
45955
45956
  // aribitrary window size
45956
45957
  var initialWindowSize = { width: 1024, height: 512 };
@@ -45962,23 +45963,35 @@ var IPerfMetadataCategory;
45962
45963
  IPerfMetadataCategory["FrameSteps"] = "Frame Steps Duration";
45963
45964
  })(IPerfMetadataCategory || (IPerfMetadataCategory = {}));
45964
45965
  // list of strategies to add to perf graph automatically.
45965
- var defaultStrategies = [
45966
- { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].GpuFrameTimeStrategy(), category: IPerfMetadataCategory.FrameSteps },
45966
+ var defaultStrategiesList = [
45967
45967
  { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].FpsStrategy() },
45968
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].TotalMeshesStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45969
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].ActiveMeshesStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45970
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].ActiveIndicesStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45971
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].ActiveBonesStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45972
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].ActiveParticlesStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45968
45973
  { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].DrawCallsStrategy(), category: IPerfMetadataCategory.Count },
45969
- { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].ActiveMeshesStrategy(), category: IPerfMetadataCategory.Count },
45974
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].TotalLightsStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45975
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].TotalVerticesStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45976
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].TotalMaterialsStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45977
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].TotalTexturesStrategy(), category: IPerfMetadataCategory.Count, hidden: true },
45978
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].AbsoluteFpsStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45979
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].MeshesSelectionStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45980
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].RenderTargetsStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45981
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].ParticlesStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45982
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].SpritesStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45983
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].AnimationsStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45984
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].PhysicsStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45985
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].RenderStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45986
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].FrameTotalStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45987
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].InterFrameStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45988
+ { strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].GpuFrameTimeStrategy(), category: IPerfMetadataCategory.FrameSteps, hidden: true },
45970
45989
  ];
45971
- var RecordingState;
45972
- (function (RecordingState) {
45973
- RecordingState["NotRecording"] = "Begin Recording";
45974
- RecordingState["Recording"] = "Stop Recording";
45975
- })(RecordingState || (RecordingState = {}));
45976
45990
  var PerformanceViewerComponent = function (props) {
45977
45991
  var scene = props.scene;
45978
45992
  var _a = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(false), isOpen = _a[0], setIsOpen = _a[1];
45979
- var _b = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(false), isLoaded = _b[0], setIsLoaded = _b[1];
45980
- var _c = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(RecordingState.NotRecording), recordingState = _c[0], setRecordingState = _c[1];
45981
- var _d = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(), performanceCollector = _d[0], setPerformanceCollector = _d[1];
45993
+ var _b = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(false), isLoadedFromCsv = _b[0], setIsLoadedFromCsv = _b[1];
45994
+ var _c = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(), performanceCollector = _c[0], setPerformanceCollector = _c[1];
45982
45995
  var layoutObservable = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]())[0];
45983
45996
  var returnToLiveObservable = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]())[0];
45984
45997
  // do cleanup when the window is closed
@@ -45986,9 +45999,18 @@ var PerformanceViewerComponent = function (props) {
45986
45999
  if (window) {
45987
46000
  window.close();
45988
46001
  }
46002
+ setIsLoadedFromCsv(false);
45989
46003
  setIsOpen(false);
45990
- setIsLoaded(false);
45991
46004
  };
46005
+ Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
46006
+ if (!isLoadedFromCsv) {
46007
+ if (performanceCollector) {
46008
+ performanceCollector.stop();
46009
+ performanceCollector.clear(false);
46010
+ addStrategies(performanceCollector);
46011
+ }
46012
+ }
46013
+ }, [isLoadedFromCsv]);
45992
46014
  var startPerformanceViewerPopup = function () {
45993
46015
  if (performanceCollector) {
45994
46016
  _inspector__WEBPACK_IMPORTED_MODULE_5__["Inspector"]._CreatePersistentPopup({
@@ -46004,21 +46026,21 @@ var PerformanceViewerComponent = function (props) {
46004
46026
  }
46005
46027
  };
46006
46028
  var onPerformanceButtonClick = function () {
46007
- setIsLoaded(false);
46008
46029
  setIsOpen(true);
46030
+ performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.start(true);
46009
46031
  startPerformanceViewerPopup();
46010
46032
  };
46011
46033
  var onLoadClick = function (file) {
46012
46034
  _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Tools"].ReadFile(file, function (data) {
46013
46035
  // reopen window and load data!
46014
46036
  setIsOpen(false);
46015
- setIsLoaded(true);
46016
- setIsOpen(true);
46017
- var isValid = performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.loadFromFileData(data);
46037
+ setIsLoadedFromCsv(true);
46038
+ performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.stop();
46039
+ var isValid = performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.loadFromFileData(data, true);
46018
46040
  if (!isValid) {
46019
46041
  // if our data isnt valid we close the window.
46020
46042
  setIsOpen(false);
46021
- setIsLoaded(false);
46043
+ performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.start(true);
46022
46044
  }
46023
46045
  else {
46024
46046
  startPerformanceViewerPopup();
@@ -46035,46 +46057,31 @@ var PerformanceViewerComponent = function (props) {
46035
46057
  layoutObservable.notifyObservers({ width: width, height: height });
46036
46058
  };
46037
46059
  var onToggleRecording = function () {
46038
- if (recordingState === RecordingState.Recording) {
46039
- setRecordingState(RecordingState.NotRecording);
46060
+ if (!(performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.isStarted)) {
46061
+ performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.start(true);
46040
46062
  }
46041
46063
  else {
46042
- setRecordingState(RecordingState.Recording);
46064
+ performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.stop();
46065
+ }
46066
+ };
46067
+ var addStrategies = function (perfCollector) {
46068
+ perfCollector.addCollectionStrategies.apply(perfCollector, defaultStrategiesList);
46069
+ if (_babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["ComputePressureObserverWrapper"].IsAvailable) {
46070
+ perfCollector.addCollectionStrategies({
46071
+ strategyCallback: _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PerfCollectionStrategy"].CpuStrategy(), category: IPerfMetadataCategory.FrameSteps
46072
+ });
46043
46073
  }
46044
46074
  };
46045
46075
  Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
46046
46076
  var perfCollector = scene.getPerfCollector();
46047
- perfCollector.addCollectionStrategies.apply(perfCollector, defaultStrategies);
46077
+ addStrategies(perfCollector);
46048
46078
  setPerformanceCollector(perfCollector);
46049
46079
  }, []);
46050
- Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
46051
- if (isOpen && !isLoaded) {
46052
- setRecordingState(RecordingState.Recording);
46053
- }
46054
- else {
46055
- setRecordingState(RecordingState.NotRecording);
46056
- }
46057
- }, [isOpen]);
46058
- Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
46059
- if (recordingState === RecordingState.Recording) {
46060
- if (performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.hasLoadedData) {
46061
- performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.clear(true);
46062
- performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.addCollectionStrategies.apply(performanceCollector, defaultStrategies);
46063
- }
46064
- performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.start();
46065
- }
46066
- else {
46067
- performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.stop();
46068
- }
46069
- return function () {
46070
- performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.stop();
46071
- };
46072
- }, [recordingState]);
46073
46080
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, isEnabled && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__["LineContainerComponent"], { title: "Performance Viewer" },
46074
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "Open Realtime Perf Viewer", onClick: onPerformanceButtonClick }),
46075
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_3__["FileButtonLineComponent"], { accept: "csv", label: "Load Perf Viewer using CSV", onClick: onLoadClick }),
46081
+ !isOpen && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "Open Realtime Perf Viewer", onClick: onPerformanceButtonClick }),
46082
+ !isOpen && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_3__["FileButtonLineComponent"], { accept: "csv", label: "Load Perf Viewer using CSV", onClick: onLoadClick }),
46076
46083
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "Export Perf to CSV", onClick: onExportClick }),
46077
- !isOpen && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: recordingState, onClick: onToggleRecording })))));
46084
+ !isOpen && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: (performanceCollector === null || performanceCollector === void 0 ? void 0 : performanceCollector.isStarted) ? "Stop Recording" : "Begin Recording", onClick: onToggleRecording })))));
46078
46085
  };
46079
46086
 
46080
46087
 
@@ -46092,19 +46099,24 @@ __webpack_require__.r(__webpack_exports__);
46092
46099
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PerformanceViewerPopupComponent", function() { return PerformanceViewerPopupComponent; });
46093
46100
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
46094
46101
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
46095
- /* harmony import */ var _performanceViewerSidebarComponent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./performanceViewerSidebarComponent */ "./components/actionTabs/tabs/performanceViewer/performanceViewerSidebarComponent.tsx");
46096
- /* harmony import */ var _performancePlayheadButtonComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./performancePlayheadButtonComponent */ "./components/actionTabs/tabs/performanceViewer/performancePlayheadButtonComponent.tsx");
46097
- /* harmony import */ var _graph_canvasGraphComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../graph/canvasGraphComponent */ "./components/graph/canvasGraphComponent.tsx");
46102
+ /* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babylonjs/core/Misc/observable */ "@babylonjs/core/Misc/observable");
46103
+ /* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
46104
+ /* harmony import */ var _performanceViewerSidebarComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./performanceViewerSidebarComponent */ "./components/actionTabs/tabs/performanceViewer/performanceViewerSidebarComponent.tsx");
46105
+ /* harmony import */ var _performancePlayheadButtonComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./performancePlayheadButtonComponent */ "./components/actionTabs/tabs/performanceViewer/performancePlayheadButtonComponent.tsx");
46106
+ /* harmony import */ var _graph_canvasGraphComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../graph/canvasGraphComponent */ "./components/graph/canvasGraphComponent.tsx");
46107
+
46108
+
46098
46109
 
46099
46110
 
46100
46111
 
46101
46112
 
46102
46113
  var PerformanceViewerPopupComponent = function (props) {
46103
46114
  var scene = props.scene, layoutObservable = props.layoutObservable, returnToLiveObservable = props.returnToLiveObservable, performanceCollector = props.performanceCollector;
46115
+ var onVisibleRangeChangedObservable = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]())[0];
46104
46116
  return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: "performance-viewer" },
46105
- react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_performancePlayheadButtonComponent__WEBPACK_IMPORTED_MODULE_2__["PerformancePlayheadButtonComponent"], { returnToPlayhead: returnToLiveObservable }),
46106
- react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_performanceViewerSidebarComponent__WEBPACK_IMPORTED_MODULE_1__["PerformanceViewerSidebarComponent"], { collector: performanceCollector }),
46107
- react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_graph_canvasGraphComponent__WEBPACK_IMPORTED_MODULE_3__["CanvasGraphComponent"], { id: "performance-viewer-graph", returnToPlayheadObservable: returnToLiveObservable, layoutObservable: layoutObservable, scene: scene, collector: performanceCollector })));
46117
+ react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_performancePlayheadButtonComponent__WEBPACK_IMPORTED_MODULE_3__["PerformancePlayheadButtonComponent"], { returnToPlayhead: returnToLiveObservable }),
46118
+ react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_performanceViewerSidebarComponent__WEBPACK_IMPORTED_MODULE_2__["PerformanceViewerSidebarComponent"], { collector: performanceCollector, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable }),
46119
+ react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_graph_canvasGraphComponent__WEBPACK_IMPORTED_MODULE_4__["CanvasGraphComponent"], { id: "performance-viewer-graph", returnToPlayheadObservable: returnToLiveObservable, layoutObservable: layoutObservable, scene: scene, collector: performanceCollector, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable })));
46108
46120
  };
46109
46121
 
46110
46122
 
@@ -46125,31 +46137,59 @@ __webpack_require__.r(__webpack_exports__);
46125
46137
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
46126
46138
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
46127
46139
  /* harmony import */ var _sharedUiComponents_lines_colorPickerComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/colorPickerComponent */ "./sharedUiComponents/lines/colorPickerComponent.tsx");
46140
+ /* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "../../../../node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
46141
+ /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
46142
+
46143
+
46144
+
46128
46145
 
46129
46146
 
46130
46147
 
46131
46148
 
46132
46149
  var PerformanceViewerSidebarComponent = function (props) {
46133
- var collector = props.collector;
46150
+ var collector = props.collector, onVisibleRangeChangedObservable = props.onVisibleRangeChangedObservable;
46134
46151
  // Map from id to IPerfMetadata information
46135
46152
  var _a = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(), metadataMap = _a[0], setMetadataMap = _a[1];
46136
46153
  // Map from category to all the ids belonging to that category
46137
46154
  var _b = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(), metadataCategoryId = _b[0], setMetadataCategoryId = _b[1];
46155
+ // Count how many elements are checked for that category
46156
+ var _c = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(), metadataCategoryChecked = _c[0], setMetadataCategoryChecked = _c[1];
46138
46157
  // List of ordered categories
46139
- var _c = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(), metadataCategories = _c[0], setMetadataCategories = _c[1];
46158
+ var _d = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(), metadataCategories = _d[0], setMetadataCategories = _d[1];
46159
+ // Min/Max/Current values of the ids
46160
+ var _e = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(), valueMap = _e[0], setValueMap = _e[1];
46161
+ Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
46162
+ if (!onVisibleRangeChangedObservable) {
46163
+ return;
46164
+ }
46165
+ var observer = function (props) {
46166
+ setValueMap(props.valueMap);
46167
+ };
46168
+ onVisibleRangeChangedObservable.add(observer);
46169
+ return function () {
46170
+ onVisibleRangeChangedObservable.removeCallback(observer);
46171
+ };
46172
+ }, [onVisibleRangeChangedObservable]);
46140
46173
  Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
46141
46174
  var onUpdateMetadata = function (metadata) {
46142
- var newMap = new Map();
46175
+ var newCategoryIdMap = new Map();
46176
+ var newCategoryCheckedMap = new Map();
46143
46177
  metadata.forEach(function (value, id) {
46144
- var _a, _b;
46178
+ var _a, _b, _c;
46145
46179
  var currentCategory = (_a = value.category) !== null && _a !== void 0 ? _a : "";
46146
- var currentIds = (_b = newMap.get(currentCategory)) !== null && _b !== void 0 ? _b : [];
46180
+ var currentIds = (_b = newCategoryIdMap.get(currentCategory)) !== null && _b !== void 0 ? _b : [];
46181
+ var currentChecked = (_c = newCategoryCheckedMap.get(currentCategory)) !== null && _c !== void 0 ? _c : 0;
46147
46182
  currentIds.push(id);
46148
- newMap.set(currentCategory, currentIds);
46183
+ newCategoryIdMap.set(currentCategory, currentIds);
46184
+ if (!value.hidden) {
46185
+ currentChecked += 1;
46186
+ }
46187
+ newCategoryCheckedMap.set(currentCategory, currentChecked);
46149
46188
  });
46150
- var orderedCategories = Array.from(newMap.keys());
46189
+ var orderedCategories = Array.from(newCategoryIdMap.keys());
46151
46190
  orderedCategories.sort();
46152
- setMetadataCategoryId(newMap);
46191
+ setMetadataCategoryId(newCategoryIdMap);
46192
+ setMetadataCategoryChecked(newCategoryCheckedMap);
46153
46193
  setMetadataMap(metadata);
46154
46194
  setMetadataCategories(orderedCategories);
46155
46195
  };
@@ -46158,8 +46198,14 @@ var PerformanceViewerSidebarComponent = function (props) {
46158
46198
  collector.metadataObservable.removeCallback(onUpdateMetadata);
46159
46199
  };
46160
46200
  }, []);
46161
- var onCheckChange = function (id) { return function (event) {
46162
- collector.updateMetadata(id, "hidden", !event.currentTarget.checked);
46201
+ var onCheckChange = function (id) { return function (selected) {
46202
+ collector.updateMetadata(id, "hidden", !selected);
46203
+ }; };
46204
+ var onCheckAllChange = function (category) { return function (selected) {
46205
+ var categoryIds = metadataCategoryId === null || metadataCategoryId === void 0 ? void 0 : metadataCategoryId.get(category);
46206
+ categoryIds === null || categoryIds === void 0 ? void 0 : categoryIds.forEach(function (id) {
46207
+ collector.updateMetadata(id, "hidden", !selected);
46208
+ });
46163
46209
  }; };
46164
46210
  var onColorChange = function (id) { return function (color) {
46165
46211
  collector.updateMetadata(id, "color", color);
@@ -46168,17 +46214,25 @@ var PerformanceViewerSidebarComponent = function (props) {
46168
46214
  var _a;
46169
46215
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: "category-" + (category || 'version') },
46170
46216
  category
46171
- ? react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "category-header header", key: "header-" + category },
46172
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("span", null, category),
46173
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkbox" }))
46174
- : react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "version-header header", key: "header-version" }, "Version:"), (_a = metadataCategoryId === null || metadataCategoryId === void 0 ? void 0 : metadataCategoryId.get(category)) === null || _a === void 0 ? void 0 :
46217
+ ? react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "category-header header sidebar-item", key: "header-" + category },
46218
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("span", { className: "category" }, category),
46219
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { isSelected: function () { var _a; return (metadataCategoryChecked === null || metadataCategoryChecked === void 0 ? void 0 : metadataCategoryChecked.get(category)) === ((_a = metadataCategoryId === null || metadataCategoryId === void 0 ? void 0 : metadataCategoryId.get(category)) === null || _a === void 0 ? void 0 : _a.length); }, onSelect: onCheckAllChange(category), faIcons: { enabled: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faCheckSquare"], disabled: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faSquare"] } }))
46220
+ : react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "version-header sidebar-item", key: "header-version" },
46221
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("span", { className: "category" }, "Version:"),
46222
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("span", { className: "value" }, _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_0__["Engine"].Version)), (_a = metadataCategoryId === null || metadataCategoryId === void 0 ? void 0 : metadataCategoryId.get(category)) === null || _a === void 0 ? void 0 :
46175
46223
  _a.map(function (id) {
46176
46224
  var _a;
46177
46225
  var metadata = metadataMap === null || metadataMap === void 0 ? void 0 : metadataMap.get(id);
46178
- return metadata && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: "perf-sidebar-item-" + id, className: "sidebar-item" },
46179
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkbox", checked: !metadata.hidden, onChange: onCheckChange(id) }),
46180
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorPickerComponent__WEBPACK_IMPORTED_MODULE_2__["ColorPickerLineComponent"], { value: _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_0__["Color3"].FromHexString((_a = metadata.color) !== null && _a !== void 0 ? _a : "#000"), onColorChanged: onColorChange(id), shouldPopRight: true }),
46181
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("span", { className: "sidebar-item-label" }, id));
46226
+ var range = valueMap === null || valueMap === void 0 ? void 0 : valueMap.get(id);
46227
+ return metadata && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: "perf-sidebar-item-" + id, className: "sidebar-item measure" },
46228
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "category" },
46229
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { isSelected: function () { return !metadata.hidden; }, onSelect: onCheckChange(id), faIcons: { enabled: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faCheckSquare"], disabled: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faSquare"] } }),
46230
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorPickerComponent__WEBPACK_IMPORTED_MODULE_2__["ColorPickerLineComponent"], { value: _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_0__["Color3"].FromHexString((_a = metadata.color) !== null && _a !== void 0 ? _a : "#000"), onColorChanged: onColorChange(id), shouldPopRight: true }),
46231
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("span", { className: "sidebar-item-label" }, id)),
46232
+ range && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value" },
46233
+ " ",
46234
+ ((range.min + range.max) / 2).toFixed(2),
46235
+ " "));
46182
46236
  })));
46183
46237
  })));
46184
46238
  };
@@ -53580,7 +53634,7 @@ __webpack_require__.r(__webpack_exports__);
53580
53634
  /* harmony import */ var _sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/optionsLineComponent */ "./sharedUiComponents/lines/optionsLineComponent.tsx");
53581
53635
  /* harmony import */ var _sharedUiComponents_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/fileButtonLineComponent */ "./sharedUiComponents/lines/fileButtonLineComponent.tsx");
53582
53636
  /* harmony import */ var _sharedUiComponents_lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/valueLineComponent */ "./sharedUiComponents/lines/valueLineComponent.tsx");
53583
- /* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @babylonjs/gui/2D/adtInstrumentation */ "@babylonjs/gui/2D/adtInstrumentation");
53637
+ /* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @babylonjs/gui/2D/adtInstrumentation */ "@babylonjs/gui/2D/controls/image");
53584
53638
  /* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__);
53585
53639
  /* harmony import */ var _customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../customPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/customPropertyGridComponent.tsx");
53586
53640
  /* harmony import */ var _sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/buttonLineComponent */ "./sharedUiComponents/lines/buttonLineComponent.tsx");
@@ -59902,7 +59956,7 @@ __webpack_require__.r(__webpack_exports__);
59902
59956
 
59903
59957
 
59904
59958
  var CanvasGraphComponent = function (props) {
59905
- var id = props.id, collector = props.collector, scene = props.scene, layoutObservable = props.layoutObservable, returnToPlayheadObservable = props.returnToPlayheadObservable;
59959
+ var id = props.id, collector = props.collector, scene = props.scene, layoutObservable = props.layoutObservable, returnToPlayheadObservable = props.returnToPlayheadObservable, onVisibleRangeChangedObservable = props.onVisibleRangeChangedObservable;
59906
59960
  var canvasRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
59907
59961
  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
59908
59962
  if (!canvasRef.current) {
@@ -59910,7 +59964,7 @@ var CanvasGraphComponent = function (props) {
59910
59964
  }
59911
59965
  var cs;
59912
59966
  try {
59913
- cs = new _canvasGraphService__WEBPACK_IMPORTED_MODULE_1__["CanvasGraphService"](canvasRef.current, { datasets: collector.datasets });
59967
+ cs = new _canvasGraphService__WEBPACK_IMPORTED_MODULE_1__["CanvasGraphService"](canvasRef.current, { datasets: collector.datasets, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable });
59914
59968
  }
59915
59969
  catch (error) {
59916
59970
  console.error(error);
@@ -60019,6 +60073,10 @@ var msInHour = msInMinute * 60;
60019
60073
  var tooltipDebounceTime = 32;
60020
60074
  // time in ms to wait between draws
60021
60075
  var drawThrottleTime = 15;
60076
+ // What distance percentage in the x axis between two points makes us break the line and draw a "no data" box instead
60077
+ var maxXDistancePercBetweenLinePoints = 0.10;
60078
+ // Color used to draw the rectangle that indicates no collection of data
60079
+ var noDataRectangleColor = "#aaaaaa";
60022
60080
  /**
60023
60081
  * This function will debounce calls to functions.
60024
60082
  *
@@ -60198,6 +60256,7 @@ var CanvasGraphService = /** @class */ (function () {
60198
60256
  this._tickerItems = [];
60199
60257
  this._preprocessedTooltipInfo = { focusedId: "", longestText: "", numberOfTooltipItems: 0, xForActualTimestamp: 0 };
60200
60258
  this._numberOfTickers = 0;
60259
+ this._onVisibleRangeChangedObservable = settings.onVisibleRangeChangedObservable;
60201
60260
  for (var i = 0; i < maximumDatasetsAllowed; i++) {
60202
60261
  this._tooltipItems.push({ text: "", color: "" });
60203
60262
  this._tickerItems.push({ text: "", id: "", max: 0, min: 0 });
@@ -60339,8 +60398,16 @@ var CanvasGraphService = /** @class */ (function () {
60339
60398
  if (prevPoint === undefined) {
60340
60399
  prevPoint = [drawableTime, drawableValue];
60341
60400
  }
60342
- ctx.moveTo(prevPoint[0], prevPoint[1]);
60343
- ctx.lineTo(drawableTime, drawableValue);
60401
+ var xDifference = drawableTime - prevPoint[0];
60402
+ var skipLine = xDifference > maxXDistancePercBetweenLinePoints * (right - left);
60403
+ if (skipLine) {
60404
+ ctx.fillStyle = noDataRectangleColor;
60405
+ ctx.fillRect(prevPoint[0], top, xDifference, bottom - top);
60406
+ }
60407
+ else {
60408
+ ctx.moveTo(prevPoint[0], prevPoint[1]);
60409
+ ctx.lineTo(drawableTime, drawableValue);
60410
+ }
60344
60411
  prevPoint[0] = drawableTime;
60345
60412
  prevPoint[1] = drawableValue;
60346
60413
  }
@@ -60352,6 +60419,7 @@ var CanvasGraphService = /** @class */ (function () {
60352
60419
  };
60353
60420
  CanvasGraphService.prototype._drawTickers = function (drawableArea, bounds) {
60354
60421
  var _this = this;
60422
+ var _a;
60355
60423
  var ctx = this._ctx;
60356
60424
  if (!ctx) {
60357
60425
  return;
@@ -60359,6 +60427,7 @@ var CanvasGraphService = /** @class */ (function () {
60359
60427
  // create the ticker objects for each of the non hidden items.
60360
60428
  var longestText = "";
60361
60429
  this._numberOfTickers = 0;
60430
+ var valueMap = new Map();
60362
60431
  this.datasets.ids.forEach(function (id, idOffset) {
60363
60432
  var _a;
60364
60433
  if (!!((_a = _this.metadata.get(id)) === null || _a === void 0 ? void 0 : _a.hidden)) {
@@ -60367,6 +60436,11 @@ var CanvasGraphService = /** @class */ (function () {
60367
60436
  var valueMinMax = _this._getMinMax(bounds, idOffset);
60368
60437
  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);
60369
60438
  var text = id + ": " + latestValue.toFixed(2) + " (max: " + valueMinMax.max.toFixed(2) + ", min: " + valueMinMax.min.toFixed(2) + ")";
60439
+ valueMap.set(id, {
60440
+ min: valueMinMax.min,
60441
+ max: valueMinMax.max,
60442
+ current: latestValue
60443
+ });
60370
60444
  if (text.length > longestText.length) {
60371
60445
  longestText = text;
60372
60446
  }
@@ -60376,6 +60450,7 @@ var CanvasGraphService = /** @class */ (function () {
60376
60450
  _this._tickerItems[_this._numberOfTickers].text = text;
60377
60451
  _this._numberOfTickers++;
60378
60452
  });
60453
+ (_a = this._onVisibleRangeChangedObservable) === null || _a === void 0 ? void 0 : _a.notifyObservers({ valueMap: valueMap });
60379
60454
  ctx.save();
60380
60455
  ctx.font = graphAddonFont;
60381
60456
  ctx.textBaseline = "middle";
@@ -60390,15 +60465,6 @@ var CanvasGraphService = /** @class */ (function () {
60390
60465
  this._tickerTextCache.text = longestText;
60391
60466
  this._tickerTextCache.width = width;
60392
60467
  }
60393
- drawableArea.right -= width;
60394
- var textHeight = this._addonFontLineHeight + Math.floor(tickerHorizontalPadding / 2);
60395
- var x = drawableArea.right + tickerHorizontalPadding;
60396
- var y = drawableArea.top + textHeight;
60397
- for (var i = 0; i < this._numberOfTickers; i++) {
60398
- var tickerItem = this._tickerItems[i];
60399
- ctx.fillText(tickerItem.text, x, y);
60400
- y += textHeight;
60401
- }
60402
60468
  ctx.restore();
60403
60469
  };
60404
60470
  /**
@@ -60991,6 +61057,7 @@ var CanvasGraphService = /** @class */ (function () {
60991
61057
  "use strict";
60992
61058
  __webpack_require__.r(__webpack_exports__);
60993
61059
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TimestampUnit", function() { return TimestampUnit; });
61060
+ ;
60994
61061
  /**
60995
61062
  * Defines the supported timestamp units.
60996
61063
  */
@@ -64673,6 +64740,8 @@ __webpack_require__.r(__webpack_exports__);
64673
64740
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
64674
64741
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
64675
64742
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
64743
+ /* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
64744
+
64676
64745
 
64677
64746
 
64678
64747
  var CheckBoxLineComponent = /** @class */ (function (_super) {
@@ -64735,8 +64804,10 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
64735
64804
  var _this = this;
64736
64805
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "checkBoxLine" },
64737
64806
  this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
64738
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.iconLabel }, this.props.label),
64739
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "checkBox" },
64807
+ this.props.label &&
64808
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.iconLabel }, this.props.label),
64809
+ this.props.faIcons && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { className: "cbx " + (this.props.disabled ? "disabled" : ""), icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: function () { return !_this.props.disabled && _this.onChange(); } }),
64810
+ !this.props.faIcons && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "checkBox" },
64740
64811
  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 }),
64741
64812
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", { htmlFor: "checkbox" + this._uniqueId, className: "lbl" + (!!this.props.disabled ? " disabled" : "") }))));
64742
64813
  };
@@ -65407,6 +65478,9 @@ var FloatLineComponent = /** @class */ (function (_super) {
65407
65478
  }
65408
65479
  }
65409
65480
  }
65481
+ else if (this.props.defaultValue != null) {
65482
+ valueAsNumber = this.props.defaultValue;
65483
+ }
65410
65484
  this._localChange = true;
65411
65485
  this.setState({ value: valueString });
65412
65486
  if (isNaN(valueAsNumber)) {
@@ -65436,7 +65510,7 @@ var FloatLineComponent = /** @class */ (function (_super) {
65436
65510
  valueAsNumber = parseFloat(this.state.value);
65437
65511
  }
65438
65512
  var className = this.props.smallUI ? "short" : "value";
65439
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
65513
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
65440
65514
  !this.props.useEuler && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine" },
65441
65515
  this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
65442
65516
  (!this.props.icon || this.props.label != "") && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label)),
@@ -66221,7 +66295,7 @@ var TextInputLineComponent = /** @class */ (function (_super) {
66221
66295
  this._localChange = true;
66222
66296
  var store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName];
66223
66297
  this.setState({ value: value });
66224
- if (this.props.propertyName) {
66298
+ if (this.props.propertyName && !this.props.delayInput) {
66225
66299
  this.props.target[this.props.propertyName] = value;
66226
66300
  }
66227
66301
  this.raiseOnPropertyChanged(value, store);
@@ -66232,7 +66306,10 @@ var TextInputLineComponent = /** @class */ (function (_super) {
66232
66306
  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" }),
66233
66307
  (!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)),
66234
66308
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value" + (this.props.noUnderline === true ? " noUnderline" : "") },
66235
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: this.state.value, onBlur: function () { return (_this.props.lockObject.lock = false); }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } }))));
66309
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: this.state.value, onBlur: function () {
66310
+ _this.props.lockObject.lock = false;
66311
+ _this.updateValue((_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "");
66312
+ }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } }))));
66236
66313
  };
66237
66314
  return TextInputLineComponent;
66238
66315
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -66852,7 +66929,7 @@ __webpack_require__.r(__webpack_exports__);
66852
66929
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
66853
66930
  /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
66854
66931
  /* harmony import */ var _lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
66855
- /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/adtInstrumentation");
66932
+ /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/controls/image");
66856
66933
  /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__);
66857
66934
  /* harmony import */ var _lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/sliderLineComponent */ "./sharedUiComponents/lines/sliderLineComponent.tsx");
66858
66935
  /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
@@ -67157,7 +67234,7 @@ __webpack_require__.r(__webpack_exports__);
67157
67234
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
67158
67235
  /* harmony import */ var _tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent */ "./sharedUiComponents/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
67159
67236
  /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
67160
- /* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/image */ "@babylonjs/gui/2D/adtInstrumentation");
67237
+ /* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/image */ "@babylonjs/gui/2D/controls/image");
67161
67238
  /* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__);
67162
67239
  /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
67163
67240
  /* harmony import */ var _lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
@@ -67574,7 +67651,7 @@ __webpack_require__.r(__webpack_exports__);
67574
67651
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
67575
67652
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
67576
67653
  /* harmony import */ var _tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent */ "./sharedUiComponents/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
67577
- /* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/textBlock */ "@babylonjs/gui/2D/adtInstrumentation");
67654
+ /* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/textBlock */ "@babylonjs/gui/2D/controls/image");
67578
67655
  /* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__);
67579
67656
  /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
67580
67657
  /* harmony import */ var _lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
@@ -67923,14 +68000,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__;
67923
68000
 
67924
68001
  /***/ }),
67925
68002
 
67926
- /***/ "@babylonjs/gui/2D/adtInstrumentation":
68003
+ /***/ "@babylonjs/gui/2D/controls/image":
67927
68004
  /*!***************************************************************************************************************************!*\
67928
68005
  !*** external {"root":["BABYLON","GUI"],"commonjs":"@babylonjs/gui","commonjs2":"@babylonjs/gui","amd":"@babylonjs/gui"} ***!
67929
68006
  \***************************************************************************************************************************/
67930
68007
  /*! no static exports found */
67931
68008
  /***/ (function(module, exports) {
67932
68009
 
67933
- module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_adtInstrumentation__;
68010
+ module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_image__;
67934
68011
 
67935
68012
  /***/ }),
67936
68013