@babylonjs/node-editor 5.0.1 → 5.0.4

package/dist/babylon.nodeEditor.max.js

@@ -1,16 +1,43 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@babylonjs/core"), require("@babylonjs/shared-ui-components"));
+		module.exports = factory(require("@babylonjs/core"));
 	else if(typeof define === 'function' && define.amd)
-		define("@babylonjs/node-editor", ["@babylonjs/core", "@babylonjs/shared-ui-components"], factory);
+		define("@babylonjs/node-editor", ["@babylonjs/core"], factory);
 	else if(typeof exports === 'object')
-		exports["@babylonjs/node-editor"] = factory(require("@babylonjs/core"), require("@babylonjs/shared-ui-components"));
+		exports["@babylonjs/node-editor"] = factory(require("@babylonjs/core"));
 	else
-		root["NODEEDITOR"] = factory(root["BABYLON"], root["BABYLON"]["SharedUIComponents"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_core_Misc_dataStorage__, __WEBPACK_EXTERNAL_MODULE_shared_ui_components_stringTools__) {
+		root["NODEEDITOR"] = factory(root["BABYLON"]);
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_core_Misc_dataStorage__) {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.scss":
+/*!**********************************************************************************************************************************************************************************************************************************!*\
+  !*** ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.scss ***!
+  \**********************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ "../../../../node_modules/css-loader/dist/runtime/sourceMaps.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".color-picker-container {\n  width: 320px;\n  height: 300px;\n  background-color: white;\n  display: grid;\n  grid-template-columns: 100%;\n  grid-template-rows: 50% 50px 60px 40px 1fr auto;\n  font-family: \"acumin-pro-condensed\";\n  font-weight: normal;\n  font-size: 14px; }\n  .color-picker-container.with-hints {\n    height: 380px; }\n  .color-picker-container .color-picker-saturation {\n    grid-row: 1;\n    grid-column: 1;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: 100%;\n    position: relative;\n    cursor: pointer; }\n    .color-picker-container .color-picker-saturation .color-picker-saturation-white {\n      grid-row: 1;\n      grid-column: 1;\n      background: -webkit-linear-gradient(to right, #fff, rgba(255, 255, 255, 0));\n      background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }\n    .color-picker-container .color-picker-saturation .color-picker-saturation-black {\n      grid-row: 1;\n      grid-column: 1;\n      background: -webkit-linear-gradient(to top, #000, rgba(0, 0, 0, 0));\n      background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }\n    .color-picker-container .color-picker-saturation .color-picker-saturation-cursor {\n      pointer-events: none;\n      width: 4px;\n      height: 4px;\n      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);\n      border-radius: 50%;\n      transform: translate(-2px, -2px);\n      position: absolute; }\n  .color-picker-container .color-picker-hue {\n    grid-row: 2;\n    grid-column: 1;\n    display: grid;\n    margin: 10px;\n    grid-template-columns: 24% 76%;\n    grid-template-rows: 100%; }\n    .color-picker-container .color-picker-hue .color-picker-hue-color {\n      grid-row: 1;\n      grid-column: 1;\n      align-self: center;\n      justify-self: center;\n      width: 30px;\n      height: 30px;\n      border-radius: 15px;\n      border: 1px solid black; }\n    .color-picker-container .color-picker-hue .color-picker-hue-slider {\n      grid-row: 1;\n      grid-column: 2;\n      align-self: center;\n      height: 16px;\n      position: relative;\n      cursor: pointer;\n      background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n      background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }\n      .color-picker-container .color-picker-hue .color-picker-hue-slider .color-picker-hue-cursor {\n        pointer-events: none;\n        width: 8px;\n        height: 18px;\n        transform: translate(-4px, -2px);\n        background-color: #f8f8f8;\n        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n        position: absolute; }\n  .color-picker-container .color-picker-component {\n    display: grid;\n    margin: 5px;\n    grid-template-columns: 100%;\n    grid-template-rows: 50% 50%; }\n    .color-picker-container .color-picker-component .color-picker-component-value {\n      justify-self: center;\n      align-self: center;\n      grid-row: 1;\n      grid-column: 1;\n      margin-bottom: 4px; }\n      .color-picker-container .color-picker-component .color-picker-component-value input {\n        width: 50px; }\n    .color-picker-container .color-picker-component .color-picker-component-label {\n      justify-self: center;\n      align-self: center;\n      grid-row: 2;\n      grid-column: 1;\n      color: black; }\n  .color-picker-container .color-picker-rgb {\n    grid-row: 3;\n    grid-column: 1;\n    display: grid;\n    margin: 10px;\n    grid-template-columns: 20% 6.66% 20% 6.66% 20% 6.66% 20%;\n    grid-template-rows: 100%; }\n  .color-picker-container .red {\n    grid-row: 1;\n    grid-column: 1; }\n  .color-picker-container .green {\n    grid-row: 1;\n    grid-column: 3; }\n  .color-picker-container .blue {\n    grid-row: 1;\n    grid-column: 5; }\n  .color-picker-container .alpha {\n    grid-row: 1;\n    grid-column: 7; }\n    .color-picker-container .alpha.grayed {\n      opacity: 0.5; }\n  .color-picker-container .color-picker-hex {\n    grid-row: 4;\n    grid-column: 1;\n    display: grid;\n    grid-template-columns: 20% 80%;\n    grid-template-rows: 100%; }\n    .color-picker-container .color-picker-hex .color-picker-hex-label {\n      justify-self: center;\n      align-self: center;\n      grid-row: 1;\n      grid-column: 1;\n      margin-left: 10px;\n      color: black; }\n    .color-picker-container .color-picker-hex .color-picker-hex-value {\n      justify-self: left;\n      align-self: center;\n      grid-row: 1;\n      grid-column: 2;\n      margin-left: 10px;\n      margin-right: 10px; }\n      .color-picker-container .color-picker-hex .color-picker-hex-value input {\n        width: 70px; }\n  .color-picker-container .color-picker-warning {\n    color: black;\n    font-size: 11px;\n    padding: 4px;\n    justify-self: left;\n    align-self: center;\n    grid-row: 6;\n    grid-column: 1; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.scss"],"names":[],"mappings":"AAAA;EACI,YAAY;EACZ,aAAa;EACb,uBAAuB;EACvB,aAAa;EACb,2BAA2B;EAC3B,+CAA+C;EAC/C,mCAAmC;EACnC,mBAAmB;EACnB,eAAe,EAAA;EATnB;IAYQ,aAAa,EAAA;EAZrB;IAgBQ,WAAW;IACX,cAAc;IACd,aAAa;IACb,2BAA2B;IAC3B,wBAAwB;IACxB,kBAAkB;IAClB,eAAe,EAAA;IAtBvB;MAyBY,WAAW;MACX,cAAc;MAEd,2EAA2E;MAC3E,mEAAmE,EAAA;IA7B/E;MAiCY,WAAW;MACX,cAAc;MAEd,mEAAmE;MACnE,2DAA2D,EAAA;IArCvE;MAyCY,oBAAoB;MACpB,UAAU;MACV,WAAW;MACX,kGAAkG;MAClG,kBAAkB;MAClB,gCAAgC;MAChC,kBAAkB,EAAA;EA/C9B;IAoDQ,WAAW;IACX,cAAc;IACd,aAAa;IACb,YAAY;IACZ,8BAA8B;IAC9B,wBAAwB,EAAA;IAzDhC;MA4DY,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,oBAAoB;MACpB,WAAW;MACX,YAAY;MACZ,mBAAmB;MACnB,uBAAuB,EAAA;IAnEnC;MAuEY,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,YAAY;MACZ,kBAAkB;MAClB,eAAe;MAEf,2GAA2G;MAC3G,mHAAmH,EAAA;MA/E/H;QAkFgB,oBAAoB;QACpB,UAAU;QACV,YAAY;QACZ,gCAAgC;QAChC,yBAAoC;QACpC,2CAA2C;QAC3C,kBAAkB,EAAA;EAxFlC;IA8FQ,aAAa;IACb,WAAW;IACX,2BAA2B;IAC3B,2BAA2B,EAAA;IAjGnC;MAoGY,oBAAoB;MACpB,kBAAkB;MAClB,WAAW;MACX,cAAc;MACd,kBAAkB,EAAA;MAxG9B;QA2GgB,WAAW,EAAA;IA3G3B;MAgHY,oBAAoB;MACpB,kBAAkB;MAClB,WAAW;MACX,cAAc;MACd,YAAY,EAAA;EApHxB;IAyHQ,WAAW;IACX,cAAc;IACd,aAAa;IACb,YAAY;IACZ,wDAAwD;IACxD,wBAAwB,EAAA;EA9HhC;IAkIQ,WAAW;IACX,cAAc,EAAA;EAnItB;IAuIQ,WAAW;IACX,cAAc,EAAA;EAxItB;IA4IQ,WAAW;IACX,cAAc,EAAA;EA7ItB;IAiJQ,WAAW;IACX,cAAc,EAAA;IAlJtB;MAqJY,YAAY,EAAA;EArJxB;IA0JQ,WAAW;IACX,cAAc;IACd,aAAa;IACb,8BAA8B;IAC9B,wBAAwB,EAAA;IA9JhC;MAiKY,oBAAoB;MACpB,kBAAkB;MAClB,WAAW;MACX,cAAc;MACd,iBAAiB;MACjB,YAAY,EAAA;IAtKxB;MA0KY,kBAAkB;MAClB,kBAAkB;MAClB,WAAW;MACX,cAAc;MACd,iBAAiB;MACjB,kBAAkB,EAAA;MA/K9B;QAkLgB,WAAW,EAAA;EAlL3B;IAwLQ,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,kBAAkB;IAClB,kBAAkB;IAClB,WAAW;IACX,cAAc,EAAA","sourcesContent":[".color-picker-container {\r\n    width: 320px;\r\n    height: 300px;\r\n    background-color: white;\r\n    display: grid;\r\n    grid-template-columns: 100%;\r\n    grid-template-rows: 50% 50px 60px 40px 1fr auto;\r\n    font-family: \"acumin-pro-condensed\";\r\n    font-weight: normal;\r\n    font-size: 14px;\r\n\r\n    &.with-hints {\r\n        height: 380px;\r\n    }\r\n\r\n    .color-picker-saturation {\r\n        grid-row: 1;\r\n        grid-column: 1;\r\n        display: grid;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: 100%;\r\n        position: relative;\r\n        cursor: pointer;\r\n\r\n        .color-picker-saturation-white {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n\r\n            background: -webkit-linear-gradient(to right, #fff, rgba(255, 255, 255, 0));\r\n            background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));\r\n        }\r\n\r\n        .color-picker-saturation-black {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n\r\n            background: -webkit-linear-gradient(to top, #000, rgba(0, 0, 0, 0));\r\n            background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));\r\n        }\r\n\r\n        .color-picker-saturation-cursor {\r\n            pointer-events: none;\r\n            width: 4px;\r\n            height: 4px;\r\n            box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);\r\n            border-radius: 50%;\r\n            transform: translate(-2px, -2px);\r\n            position: absolute;\r\n        }\r\n    }\r\n\r\n    .color-picker-hue {\r\n        grid-row: 2;\r\n        grid-column: 1;\r\n        display: grid;\r\n        margin: 10px;\r\n        grid-template-columns: 24% 76%;\r\n        grid-template-rows: 100%;\r\n\r\n        .color-picker-hue-color {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            align-self: center;\r\n            justify-self: center;\r\n            width: 30px;\r\n            height: 30px;\r\n            border-radius: 15px;\r\n            border: 1px solid black;\r\n        }\r\n\r\n        .color-picker-hue-slider {\r\n            grid-row: 1;\r\n            grid-column: 2;\r\n            align-self: center;\r\n            height: 16px;\r\n            position: relative;\r\n            cursor: pointer;\r\n\r\n            background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\r\n            background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\r\n\r\n            .color-picker-hue-cursor {\r\n                pointer-events: none;\r\n                width: 8px;\r\n                height: 18px;\r\n                transform: translate(-4px, -2px);\r\n                background-color: rgb(248, 248, 248);\r\n                box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\r\n                position: absolute;\r\n            }\r\n        }\r\n    }\r\n\r\n    .color-picker-component {\r\n        display: grid;\r\n        margin: 5px;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: 50% 50%;\r\n\r\n        .color-picker-component-value {\r\n            justify-self: center;\r\n            align-self: center;\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            margin-bottom: 4px;\r\n\r\n            input {\r\n                width: 50px;\r\n            }\r\n        }\r\n\r\n        .color-picker-component-label {\r\n            justify-self: center;\r\n            align-self: center;\r\n            grid-row: 2;\r\n            grid-column: 1;\r\n            color: black;\r\n        }\r\n    }\r\n\r\n    .color-picker-rgb {\r\n        grid-row: 3;\r\n        grid-column: 1;\r\n        display: grid;\r\n        margin: 10px;\r\n        grid-template-columns: 20% 6.66% 20% 6.66% 20% 6.66% 20%;\r\n        grid-template-rows: 100%;\r\n    }\r\n\r\n    .red {\r\n        grid-row: 1;\r\n        grid-column: 1;\r\n    }\r\n\r\n    .green {\r\n        grid-row: 1;\r\n        grid-column: 3;\r\n    }\r\n\r\n    .blue {\r\n        grid-row: 1;\r\n        grid-column: 5;\r\n    }\r\n\r\n    .alpha {\r\n        grid-row: 1;\r\n        grid-column: 7;\r\n\r\n        &.grayed {\r\n            opacity: 0.5;\r\n        }\r\n    }\r\n\r\n    .color-picker-hex {\r\n        grid-row: 4;\r\n        grid-column: 1;\r\n        display: grid;\r\n        grid-template-columns: 20% 80%;\r\n        grid-template-rows: 100%;\r\n\r\n        .color-picker-hex-label {\r\n            justify-self: center;\r\n            align-self: center;\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            margin-left: 10px;\r\n            color: black;\r\n        }\r\n\r\n        .color-picker-hex-value {\r\n            justify-self: left;\r\n            align-self: center;\r\n            grid-row: 1;\r\n            grid-column: 2;\r\n            margin-left: 10px;\r\n            margin-right: 10px;\r\n\r\n            input {\r\n                width: 70px;\r\n            }\r\n        }\r\n    }\r\n\r\n    .color-picker-warning {\r\n        color: black;\r\n        font-size: 11px;\r\n        padding: 4px;\r\n        justify-self: left;\r\n        align-self: center;\r\n        grid-row: 6;\r\n        grid-column: 1;\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
 /***/ "../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../../tools/nodeEditor/dist/components/log/log.scss":
 /*!***********************************************************************************************************************************************************************************************************************!*\
   !*** ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../../tools/nodeEditor/dist/components/log/log.scss ***!
@@ -61390,6 +61417,352 @@ function styleTagTransform(css, styleElement) {
 
 module.exports = styleTagTransform;
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/colorPicker/colorComponentEntry.js":
+/*!*******************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/colorPicker/colorComponentEntry.js ***!
+  \*******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "ColorComponentEntry": () => (/* binding */ ColorComponentEntry)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
+
+
+class ColorComponentEntry extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
+    constructor(props) {
+        super(props);
+    }
+    updateValue(valueString) {
+        if (/[^0-9.-]/g.test(valueString)) {
+            return;
+        }
+        let valueAsNumber = parseInt(valueString);
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+        if (this.props.max != undefined && valueAsNumber > this.props.max) {
+            valueAsNumber = this.props.max;
+        }
+        if (this.props.min != undefined && valueAsNumber < this.props.min) {
+            valueAsNumber = this.props.min;
+        }
+        this.props.onChange(valueAsNumber);
+    }
+    render() {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-component" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-component-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-component-label" }, { children: this.props.label }))] })));
+    }
+}
+
+
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.js":
+/*!***********************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.js ***!
+  \***********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "ColorPicker": () => (/* binding */ ColorPicker)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
+/* harmony import */ var core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.color */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./colorComponentEntry */ "../../../dev/sharedUiComponents/dist/colorPicker/colorComponentEntry.js");
+/* harmony import */ var _hexColor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hexColor */ "../../../dev/sharedUiComponents/dist/colorPicker/hexColor.js");
+/* harmony import */ var _colorPicker_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./colorPicker.scss */ "../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.scss");
+
+
+
+
+
+
+/**
+ * Class used to create a color picker
+ */
+class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
+    constructor(props) {
+        super(props);
+        if (this.props.color instanceof core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4) {
+            this.state = { color: new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };
+        }
+        else {
+            this.state = { color: this.props.color.clone(), alpha: 1 };
+        }
+        this._saturationRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
+        this._hueRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextProps.color.toHexString() !== this.props.color.toHexString() || nextState.color.toHexString() !== this.props.color.toHexString();
+    }
+    onSaturationPointerDown(evt) {
+        this._evaluateSaturation(evt);
+        this._isSaturationPointerDown = true;
+        evt.currentTarget.setPointerCapture(evt.pointerId);
+    }
+    onSaturationPointerUp(evt) {
+        this._isSaturationPointerDown = false;
+        evt.currentTarget.releasePointerCapture(evt.pointerId);
+    }
+    onSaturationPointerMove(evt) {
+        if (!this._isSaturationPointerDown) {
+            return;
+        }
+        this._evaluateSaturation(evt);
+    }
+    onHuePointerDown(evt) {
+        this._evaluateHue(evt);
+        this._isHuePointerDown = true;
+        evt.currentTarget.setPointerCapture(evt.pointerId);
+    }
+    onHuePointerUp(evt) {
+        this._isHuePointerDown = false;
+        evt.currentTarget.releasePointerCapture(evt.pointerId);
+    }
+    onHuePointerMove(evt) {
+        if (!this._isHuePointerDown) {
+            return;
+        }
+        this._evaluateHue(evt);
+    }
+    _evaluateSaturation(evt) {
+        const left = evt.nativeEvent.offsetX;
+        const top = evt.nativeEvent.offsetY;
+        const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current.clientWidth));
+        const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current.clientHeight));
+        if (this.props.debugMode) {
+            console.log("Saturation: " + saturation);
+            console.log("Value: " + value);
+        }
+        const hsv = this.state.color.toHSV();
+        core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);
+        if (this.state.alpha === 0) {
+            this.setState({ alpha: 1 });
+        }
+        this.setState({ color: this.state.color });
+    }
+    _evaluateHue(evt) {
+        const left = evt.nativeEvent.offsetX;
+        const hue = 360 * Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current.clientWidth));
+        if (this.props.debugMode) {
+            console.log("Hue: " + hue);
+        }
+        const hsv = this.state.color.toHSV();
+        core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);
+        this.setState({ color: this.state.color });
+    }
+    componentDidUpdate() {
+        this.raiseOnColorChanged();
+    }
+    raiseOnColorChanged() {
+        if (!this.props.onColorChanged) {
+            return;
+        }
+        if (this.props.color instanceof core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4) {
+            const newColor4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromColor3(this.state.color, this.state.alpha);
+            this.props.onColorChanged(newColor4);
+            return;
+        }
+        this.props.onColorChanged(this.state.color.clone());
+    }
+    render() {
+        const colorHex = this.state.color.toHexString();
+        const hsv = this.state.color.toHSV();
+        const colorRef = new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3();
+        core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
+        const colorHexRef = colorRef.toHexString();
+        const hasAlpha = this.props.color instanceof core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4;
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-container" + (this.props.linearhint ? " with-hints" : "") }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-saturation", onPointerMove: (e) => this.onSaturationPointerMove(e), onPointerDown: (e) => this.onSaturationPointerDown(e), onPointerUp: (e) => this.onSaturationPointerUp(e), ref: this._saturationRef, style: {
+                        background: colorHexRef,
+                    } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-white" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-black" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-cursor", style: {
+                                top: `${-(hsv.b * 100) + 100}%`,
+                                left: `${hsv.g * 100}%`,
+                            } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-hue" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-color", style: {
+                                background: colorHex,
+                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-cursor", style: {
+                                    left: `${(hsv.r / 360.0) * 100}%`,
+                                    border: `1px solid ` + colorHexRef,
+                                } }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-rgb" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "red" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
+                                    this.state.color.r = value / 255.0;
+                                    this.forceUpdate();
+                                } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "green" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
+                                    this.state.color.g = value / 255.0;
+                                    this.forceUpdate();
+                                } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blue" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
+                                    this.state.color.b = value / 255.0;
+                                    this.forceUpdate();
+                                } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "alpha" + (hasAlpha ? "" : " grayed") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
+                                    this.setState({ alpha: value / 255.0 });
+                                    this.forceUpdate();
+                                } }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-hex" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hex-label" }, { children: "Hex" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hex-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_hexColor__WEBPACK_IMPORTED_MODULE_4__.HexColor, { expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
+                                    if (hasAlpha) {
+                                        const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromHexString(value);
+                                        this.setState({ color: new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3(color4.r, color4.g, color4.b), alpha: color4.a });
+                                    }
+                                    else {
+                                        this.setState({ color: core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.FromHexString(value) });
+                                    }
+                                } }) }))] })), this.props.linearhint && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-warning" }, { children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" })))] })));
+    }
+}
+
+
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/colorPicker/hexColor.js":
+/*!********************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/colorPicker/hexColor.js ***!
+  \********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "HexColor": () => (/* binding */ HexColor)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
+
+
+class HexColor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hex: this.props.value.replace("#", "") };
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.value !== this.props.value) {
+            nextState.hex = nextProps.value.replace("#", "");
+        }
+        return true;
+    }
+    updateHexValue(valueString) {
+        if (valueString != "" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {
+            return;
+        }
+        this.setState({ hex: valueString });
+        if (valueString.length !== this.props.expectedLength) {
+            return;
+        }
+        this.props.onChange("#" + valueString);
+    }
+    render() {
+        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "string", className: "hex-input", value: this.state.hex, onChange: (evt) => this.updateHexValue(evt.target.value) });
+    }
+}
+
+
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/stringTools.js":
+/*!***********************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/stringTools.js ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "StringTools": () => (/* binding */ StringTools)
+/* harmony export */ });
+class StringTools {
+    /*
+     * Based on FileSaver.js
+     * A saveAs() FileSaver implementation.
+     *
+     * By Eli Grey, http://eligrey.com
+     *
+     * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
+     * source  : http://purl.eligrey.com/github/FileSaver.js
+     */
+    static _SaveAs(blob, name, document) {
+        if ("download" in HTMLAnchorElement.prototype) {
+            const URL = window.URL || window.webkitURL;
+            const a = document.createElement("a");
+            a.download = name;
+            a.rel = "noopener"; // tabnabbing
+            a.href = URL.createObjectURL(blob);
+            setTimeout(() => {
+                URL.revokeObjectURL(a.href);
+            }, 4e4); // 40s
+            setTimeout(() => {
+                this._Click(a, document);
+            }, 0);
+            return;
+        }
+        // Open a popup immediately do go around popup blocker
+        // Mostly only available on user interaction and the fileReader is async so...
+        let popup = open("", "_blank");
+        if (popup) {
+            popup.document.title = popup.document.body.innerText = "downloading...";
+        }
+        const force = blob.type === "application/octet-stream";
+        const isSafari = /constructor/i.test(window.HTMLElement) || window.safari;
+        const isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
+        if ((isChromeIOS || (force && isSafari)) && typeof FileReader !== "undefined") {
+            // Safari doesn't allow downloading of blob URLs
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                let url = reader.result;
+                url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, "data:attachment/file;");
+                if (popup) {
+                    popup.location.href = url;
+                }
+                else {
+                    location = url;
+                }
+                popup = null;
+            };
+            reader.readAsDataURL(blob);
+        }
+        else {
+            const URL = window.URL || window.webkitURL;
+            const url = URL.createObjectURL(blob);
+            if (popup) {
+                popup.location.href = url;
+            }
+            else {
+                location.href = url;
+            }
+            popup = null;
+            setTimeout(function () {
+                URL.revokeObjectURL(url);
+            }, 4e4);
+        }
+    }
+    static _Click(node, document) {
+        try {
+            node.dispatchEvent(new MouseEvent("click"));
+        }
+        catch (e) {
+            const evt = document.createEvent("MouseEvents");
+            evt.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+            node.dispatchEvent(evt);
+        }
+    }
+    /**
+     * Download a string into a file that will be saved locally by the browser
+     * @param document
+     * @param content defines the string to download locally as a file
+     * @param filename
+     */
+    static DownloadAsFile(document, content, filename) {
+        const blob = new Blob([content], {
+            type: "application/octet-stream",
+        });
+        this._SaveAs(blob, filename, document);
+    }
+}
+
+
 /***/ }),
 
 /***/ "../../../tools/nodeEditor/dist/blockTools.js":
@@ -63628,8 +64001,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var _sharedComponents_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../sharedComponents/buttonLineComponent */ "../../../tools/nodeEditor/dist/sharedComponents/buttonLineComponent.js");
 /* harmony import */ var _sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../sharedComponents/lineContainerComponent */ "../../../tools/nodeEditor/dist/sharedComponents/lineContainerComponent.js");
-/* harmony import */ var shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared-ui-components/stringTools */ "shared-ui-components/stringTools");
-/* harmony import */ var shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared-ui-components/stringTools */ "../../../dev/sharedUiComponents/dist/stringTools.js");
 /* harmony import */ var _sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../sharedComponents/fileButtonLineComponent */ "../../../tools/nodeEditor/dist/sharedComponents/fileButtonLineComponent.js");
 /* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core/Engines/constants */ "core/Misc/dataStorage");
 /* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__);
@@ -64841,7 +65213,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
                     this._selectedLink = selection;
                     this._selectedPort = null;
                 }
-                else if (selection instanceof _graphFrame__WEBPACK_IMPORTED_MODULE_7__.GraphFrame) {
+                else if (selection instanceof _graphFrame__WEBPACK_IMPORTED_MODULE_7__.GraphFrame && !this._selectedNodes.length) {
                     if (selection.isCollapsed) {
                         if (this._ctrlKeyIsPressed || forceKeepSelection) {
                             if (this._selectedFrames.indexOf(selection) === -1) {
@@ -64866,6 +65238,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
                     if (this._ctrlKeyIsPressed || forceKeepSelection) {
                         if (this._selectedNodes.indexOf(selection) === -1) {
                             this._selectedNodes.push(selection);
+                            this._selectedFrames = [];
                         }
                     }
                     else {
@@ -64881,7 +65254,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
                     this._selectedLink = null;
                     this._selectedPort = selection;
                 }
-                else {
+                else if (selection instanceof _frameNodePort__WEBPACK_IMPORTED_MODULE_8__.FrameNodePort) {
                     this._selectedNodes = [];
                     this._selectedFrames = [];
                     this._selectedLink = null;
@@ -65612,8 +65985,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core/Maths/math.color */ "core/Misc/dataStorage");
 /* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _serializationTools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../serializationTools */ "../../../tools/nodeEditor/dist/serializationTools.js");
-/* harmony import */ var shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! shared-ui-components/stringTools */ "shared-ui-components/stringTools");
-/* harmony import */ var shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! shared-ui-components/stringTools */ "../../../dev/sharedUiComponents/dist/stringTools.js");
 /* harmony import */ var _frameNodePort__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./frameNodePort */ "../../../tools/nodeEditor/dist/diagram/frameNodePort.js");
 
 
@@ -70681,8 +71053,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-/* harmony import */ var shared_ui_components_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! shared-ui-components/colorPicker/colorPicker */ "shared-ui-components/stringTools");
-/* harmony import */ var shared_ui_components_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(shared_ui_components_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var shared_ui_components_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! shared-ui-components/colorPicker/colorPicker */ "../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.js");
 
 
 
@@ -72074,6 +72445,61 @@ Vector4LineComponent.defaultProps = {
 };
 
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.scss":
+/*!*************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.scss ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ "../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ "../../../../node_modules/style-loader/dist/runtime/insertBySelector.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ "../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ "../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ "../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_colorPicker_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./colorPicker.scss */ "../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../../dev/sharedUiComponents/dist/colorPicker/colorPicker.scss");
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var options = {};
+
+options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
+options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
+
+      options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
+    
+options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
+options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_colorPicker_scss__WEBPACK_IMPORTED_MODULE_6__["default"], options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_colorPicker_scss__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_colorPicker_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_colorPicker_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "../../../tools/nodeEditor/dist/components/log/log.scss":
@@ -72536,17 +72962,6 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHZl
 "use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE_core_Misc_dataStorage__;
 
-/***/ }),
-
-/***/ "shared-ui-components/stringTools":
-/*!*********************************************************************************************************************************************************************************************!*\
-  !*** external {"root":["BABYLON","SharedUIComponents"],"commonjs":"@babylonjs/shared-ui-components","commonjs2":"@babylonjs/shared-ui-components","amd":"@babylonjs/shared-ui-components"} ***!
-  \*********************************************************************************************************************************************************************************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE_shared_ui_components_stringTools__;
-
 /***/ })
 
 /******/ 	});