@babylonjs/node-editor 5.44.0 → 5.45.1

package/dist/babylon.nodeEditor.max.js

@@ -37,6 +37,34 @@ ___CSS_LOADER_EXPORT___.locals = {};
 /* 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]!../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.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/nodeGraphSystem/searchBox.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, "#graph-search-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0; }\n  #graph-search-container #graph-search-picking-blocker {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    cursor: default; }\n  #graph-search-container #graph-search-box {\n    width: 300px;\n    height: 400px;\n    position: absolute;\n    left: calc(50% - 150px);\n    top: calc(50% - 200px);\n    background: #484848;\n    border: 2px solid black;\n    z-index: 100;\n    cursor: auto;\n    display: grid;\n    grid-template-rows: auto auto 1fr; }\n    #graph-search-container #graph-search-box .graph-search-box-title {\n      border-bottom: 1px solid #282828;\n      margin: 4px;\n      padding-bottom: 4px;\n      color: white;\n      grid-row: 1; }\n    #graph-search-container #graph-search-box .graph-search-box-filter {\n      margin: 4px;\n      padding-bottom: 4px;\n      border-radius: 4px;\n      width: calc(100% - 16px);\n      grid-row: 2; }\n    #graph-search-container #graph-search-box .graph-search-box-list {\n      grid-row: 3;\n      overflow-y: auto;\n      display: flex;\n      flex-direction: column; }\n      #graph-search-container #graph-search-box .graph-search-box-list .graph-search-box-list-item {\n        margin-left: 4px;\n        cursor: pointer;\n        color: white;\n        margin-top: 4px;\n        margin-bottom: 4px; }\n        #graph-search-container #graph-search-box .graph-search-box-list .graph-search-box-list-item:hover {\n          background: #1e1e1e; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.scss"],"names":[],"mappings":"AAAA;EACI,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,OAAO;EACP,MAAM,EAAA;EALV;IAQQ,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,OAAO;IACP,MAAM;IACN,eAAe,EAAA;EAbvB;IAiBQ,YAAY;IACZ,aAAa;IACb,kBAAkB;IAClB,uBAAuB;IACvB,sBAAsB;IACtB,mBAA2B;IAC3B,uBAAuB;IACvB,YAAY;IACZ,YAAY;IACZ,aAAa;IACb,iCAAiC,EAAA;IA3BzC;MA8BY,gCAAwC;MACxC,WAAW;MACX,mBAAmB;MACnB,YAAY;MACZ,WAAW,EAAA;IAlCvB;MAsCY,WAAW;MACX,mBAAmB;MACnB,kBAAkB;MAClB,wBAAwB;MACxB,WAAW,EAAA;IA1CvB;MA8CY,WAAW;MACX,gBAAgB;MAChB,aAAa;MACb,sBAAsB,EAAA;MAjDlC;QAoDgB,gBAAgB;QAChB,eAAe;QACf,YAAY;QACZ,eAAe;QACf,kBAAkB,EAAA;QAxDlC;UA2DoB,mBAA2B,EAAA","sourcesContent":["#graph-search-container {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    left: 0;\r\n    top: 0;\r\n\r\n    #graph-search-picking-blocker {\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 100%;\r\n        left: 0;\r\n        top: 0;\r\n        cursor: default;\r\n    }\r\n\r\n    #graph-search-box {\r\n        width: 300px;\r\n        height: 400px;\r\n        position: absolute;\r\n        left: calc(50% - 150px);\r\n        top: calc(50% - 200px);\r\n        background: rgb(72, 72, 72);\r\n        border: 2px solid black;\r\n        z-index: 100;\r\n        cursor: auto;\r\n        display: grid;\r\n        grid-template-rows: auto auto 1fr;\r\n\r\n        .graph-search-box-title {\r\n            border-bottom: 1px solid rgb(40, 40, 40);\r\n            margin: 4px;\r\n            padding-bottom: 4px;\r\n            color: white;\r\n            grid-row: 1;\r\n        }\r\n\r\n        .graph-search-box-filter {\r\n            margin: 4px;\r\n            padding-bottom: 4px;\r\n            border-radius: 4px;\r\n            width: calc(100% - 16px);\r\n            grid-row: 2;\r\n        }\r\n\r\n        .graph-search-box-list {\r\n            grid-row: 3;\r\n            overflow-y: auto;\r\n            display: flex;\r\n            flex-direction: column;\r\n\r\n            .graph-search-box-list-item {\r\n                margin-left: 4px;\r\n                cursor: pointer;\r\n                color: white;\r\n                margin-top: 4px;\r\n                margin-bottom: 4px;\r\n\r\n                &:hover {\r\n                    background: rgb(30, 30, 30);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {};
+/* 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":
@@ -244,7 +272,7 @@ __webpack_require__.r(__webpack_exports__);
 
 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, ".\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-canvas {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  font: 14px \"acumin-pro\";\n  user-select: none;\n  overflow: hidden;\n  cursor: move;\n  background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px); }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-container {\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  transform-origin: left top;\n  display: grid;\n  grid-template-rows: 100%;\n  grid-template-columns: 100%; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__frame-container {\n  overflow: visible;\n  grid-row: 1;\n  grid-column: 1;\n  position: relative;\n  width: 100%;\n  height: 100%; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-svg-container {\n  grid-row: 1;\n  grid-column: 1;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n  z-index: 2;\n  filter: drop-shadow(7px 6px 2px rgba(0, 0, 0, 0.2)); }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-canvas-container {\n  grid-row: 1;\n  grid-column: 1;\n  position: relative;\n  width: 100%;\n  height: 100%; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__selection-container {\n  pointer-events: none; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__selection-box {\n  z-index: 10;\n  position: absolute;\n  background: rgba(72, 72, 196, 0.5);\n  border: blue solid 2px; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/graphCanvas.modules.scss"],"names":[],"mappings":"AAAA;EACI,WAAW;EACX,YAAY;EACZ,SAAS;EACT,UAAU;EACV,uBAAuB;EACvB,iBAAiB;EACjB,gBAAgB;EAChB,YAAY;EACZ,mIAAmI,EAAA;;AAGvI;EACI,WAAW;EACX,YAAY;EACZ,OAAO;EACP,MAAM;EACN,0BAA0B;EAC1B,aAAa;EACb,wBAAwB;EACxB,2BAA2B,EAAA;;AAG/B;EACI,iBAAiB;EACjB,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,WAAW;EACX,YAAY,EAAA;;AAGhB;EACI,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,oBAAoB;EACpB,UAAU;EACV,mDAAmD,EAAA;;AAGvD;EACI,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,WAAW;EACX,YAAY,EAAA;;AAGhB;EACI,oBAAoB,EAAA;;AAGxB;EACI,WAAW;EACX,kBAAkB;EAClB,kCAAkC;EAClC,sBAAsB,EAAA","sourcesContent":[".graph-canvas {\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    font: 14px \"acumin-pro\";\r\n    user-select: none;\r\n    overflow: hidden;\r\n    cursor: move;\r\n    background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px);\r\n}\r\n\r\n.graph-container {\r\n    width: 100%;\r\n    height: 100%;\r\n    left: 0;\r\n    top: 0;\r\n    transform-origin: left top;\r\n    display: grid;\r\n    grid-template-rows: 100%;\r\n    grid-template-columns: 100%;\r\n}\r\n\r\n.frame-container {\r\n    overflow: visible;\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.graph-svg-container {\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: visible;\r\n    pointer-events: none;\r\n    z-index: 2;\r\n    filter: drop-shadow(7px 6px 2px rgba(0, 0, 0, 0.2));\r\n}\r\n\r\n.graph-canvas-container {\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.selection-container {\r\n    pointer-events: none;\r\n}\r\n\r\n.selection-box {\r\n    z-index: 10;\r\n    position: absolute;\r\n    background: rgba(72, 72, 196, 0.5);\r\n    border: blue solid 2px;\r\n}\r\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-canvas {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  font: 14px \"acumin-pro\";\n  user-select: none;\n  overflow: hidden;\n  cursor: move;\n  position: relative;\n  background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px); }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-container {\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  transform-origin: left top;\n  display: grid;\n  grid-template-rows: 100%;\n  grid-template-columns: 100%; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__frame-container {\n  overflow: visible;\n  grid-row: 1;\n  grid-column: 1;\n  position: relative;\n  width: 100%;\n  height: 100%; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-svg-container {\n  grid-row: 1;\n  grid-column: 1;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n  z-index: 2;\n  filter: drop-shadow(7px 6px 2px rgba(0, 0, 0, 0.2)); }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-canvas-container {\n  grid-row: 1;\n  grid-column: 1;\n  position: relative;\n  width: 100%;\n  height: 100%; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__selection-container {\n  pointer-events: none; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__selection-box {\n  z-index: 10;\n  position: absolute;\n  background: rgba(72, 72, 196, 0.5);\n  border: blue solid 2px; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/graphCanvas.modules.scss"],"names":[],"mappings":"AAAA;EACI,WAAW;EACX,YAAY;EACZ,SAAS;EACT,UAAU;EACV,uBAAuB;EACvB,iBAAiB;EACjB,gBAAgB;EAChB,YAAY;EACZ,kBAAkB;EAClB,mIAAmI,EAAA;;AAGvI;EACI,WAAW;EACX,YAAY;EACZ,OAAO;EACP,MAAM;EACN,0BAA0B;EAC1B,aAAa;EACb,wBAAwB;EACxB,2BAA2B,EAAA;;AAG/B;EACI,iBAAiB;EACjB,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,WAAW;EACX,YAAY,EAAA;;AAGhB;EACI,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,oBAAoB;EACpB,UAAU;EACV,mDAAmD,EAAA;;AAGvD;EACI,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,WAAW;EACX,YAAY,EAAA;;AAGhB;EACI,oBAAoB,EAAA;;AAGxB;EACI,WAAW;EACX,kBAAkB;EAClB,kCAAkC;EAClC,sBAAsB,EAAA","sourcesContent":[".graph-canvas {\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    font: 14px \"acumin-pro\";\r\n    user-select: none;\r\n    overflow: hidden;\r\n    cursor: move;\r\n    position: relative;\r\n    background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px);\r\n}\r\n\r\n.graph-container {\r\n    width: 100%;\r\n    height: 100%;\r\n    left: 0;\r\n    top: 0;\r\n    transform-origin: left top;\r\n    display: grid;\r\n    grid-template-rows: 100%;\r\n    grid-template-columns: 100%;\r\n}\r\n\r\n.frame-container {\r\n    overflow: visible;\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.graph-svg-container {\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: visible;\r\n    pointer-events: none;\r\n    z-index: 2;\r\n    filter: drop-shadow(7px 6px 2px rgba(0, 0, 0, 0.2));\r\n}\r\n\r\n.graph-canvas-container {\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.selection-container {\r\n    pointer-events: none;\r\n}\r\n\r\n.selection-box {\r\n    z-index: 10;\r\n    position: absolute;\r\n    background: rgba(72, 72, 196, 0.5);\r\n    border: blue solid 2px;\r\n}\r\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"graph-canvas": "---------dev-sharedUiComponents-dist-nodeGraphSystem-graphCanvas-modules__graph-canvas",
@@ -49601,6 +49629,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _common_modules_scss__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./common.modules.scss */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/common.modules.scss");
 /* harmony import */ var _typeLedger__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./typeLedger */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/typeLedger.js");
 /* harmony import */ var _tools__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./tools */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/tools.js");
+/* harmony import */ var _searchBox__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./searchBox */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.js");
+
 
 
 
@@ -49882,47 +49912,96 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             });
         }
     }
-    handleKeyDown(evt, onRemove, mouseLocationX, mouseLocationY, dataGenerator, rootElement) {
-        if ((evt.keyCode === 46 || evt.keyCode === 8) && !this.props.stateManager.lockObject.lock) {
-            // Delete
-            const selectedItems = this.selectedNodes;
-            const inputs = [];
-            const outputs = [];
-            if (selectedItems.length > 0) {
-                for (const selectedItem of selectedItems) {
-                    if (evt.altKey) {
-                        this.populateConnectedEntriesBeforeRemoval(selectedItem, selectedItems, inputs, outputs);
-                    }
-                    selectedItem.dispose();
-                    onRemove(selectedItem.content);
-                    this.removeDataFromCache(selectedItem.content.data);
+    smartAddOverLink(node, link) {
+        // Connect the ports
+        const inputs = [];
+        const outputs = [];
+        const availableNodeInputs = [];
+        const availableNodeOutputs = [];
+        const leftNode = link.nodeA;
+        const rightNode = link.nodeB;
+        // Delete previous
+        link.dispose();
+        // Get the ports
+        availableNodeInputs.push(...node.content.inputs.filter((i) => !i.isConnected));
+        availableNodeOutputs.push(...node.content.outputs);
+        inputs.push(...leftNode.content.outputs);
+        outputs.push(...rightNode.content.inputs.filter((i) => !i.isConnected));
+        // Reconnect
+        this.automaticRewire(inputs, availableNodeInputs, true);
+        this.automaticRewire(availableNodeOutputs, outputs, true);
+        this.props.stateManager.onRebuildRequiredObservable.notifyObservers(false);
+    }
+    smartAddOverNode(node, source) {
+        // Connect the ports
+        const inputs = [];
+        const availableNodeInputs = [];
+        // Get the ports
+        availableNodeInputs.push(...node.content.inputs.filter((i) => !i.isConnected));
+        inputs.push(...source.content.outputs);
+        // Reconnect
+        this.automaticRewire(inputs, availableNodeInputs, true);
+        this.props.stateManager.onRebuildRequiredObservable.notifyObservers(false);
+    }
+    deleteSelection(onRemove, autoReconnect = false) {
+        // Delete
+        const selectedItems = this.selectedNodes;
+        const inputs = [];
+        const outputs = [];
+        let needRebuild = false;
+        if (selectedItems.length > 0) {
+            needRebuild = true;
+            for (const selectedItem of selectedItems) {
+                if (autoReconnect) {
+                    this.populateConnectedEntriesBeforeRemoval(selectedItem, selectedItems, inputs, outputs);
                 }
+                selectedItem.dispose();
+                onRemove(selectedItem.content);
+                this.removeDataFromCache(selectedItem.content.data);
             }
-            if (this.selectedLink) {
-                this.selectedLink.dispose();
-            }
-            if (this.selectedFrames.length) {
-                for (const frame of this.selectedFrames) {
-                    if (frame.isCollapsed) {
-                        while (frame.nodes.length > 0) {
-                            onRemove(frame.nodes[0].content);
-                            this.removeDataFromCache(frame.nodes[0].content.data);
-                            frame.nodes[0].dispose();
-                        }
-                        frame.isCollapsed = false;
-                    }
-                    else {
-                        frame.nodes.forEach((node) => {
-                            node.enclosingFrameId = -1;
-                        });
+        }
+        if (this.selectedLink) {
+            needRebuild = true;
+            this.selectedLink.dispose();
+        }
+        if (this.selectedFrames.length) {
+            needRebuild = true;
+            for (const frame of this.selectedFrames) {
+                if (frame.isCollapsed) {
+                    while (frame.nodes.length > 0) {
+                        onRemove(frame.nodes[0].content);
+                        this.removeDataFromCache(frame.nodes[0].content.data);
+                        frame.nodes[0].dispose();
                     }
-                    frame.dispose();
+                    frame.isCollapsed = false;
+                }
+                else {
+                    frame.nodes.forEach((node) => {
+                        node.enclosingFrameId = -1;
+                    });
                 }
+                frame.dispose();
             }
-            // Reconnect if required
-            this.automaticRewire(inputs, outputs);
-            this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
-            this.props.stateManager.onRebuildRequiredObservable.notifyObservers(false);
+        }
+        if (!needRebuild) {
+            return;
+        }
+        // Reconnect if required
+        this.automaticRewire(inputs, outputs);
+        this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
+        this.props.stateManager.onRebuildRequiredObservable.notifyObservers(false);
+    }
+    handleKeyDown(evt, onRemove, mouseLocationX, mouseLocationY, dataGenerator, rootElement) {
+        if (this.stateManager.modalIsDisplayed) {
+            return;
+        }
+        if (evt.code === "Space" && evt.target === this.props.stateManager.hostDocument.body) {
+            this.stateManager.modalIsDisplayed = true;
+            this.props.stateManager.onSearchBoxRequiredObservable.notifyObservers({ x: mouseLocationX, y: mouseLocationY });
+            return;
+        }
+        if ((evt.keyCode === 46 || evt.keyCode === 8) && !this.props.stateManager.lockObject.lock) {
+            this.deleteSelection(onRemove, evt.altKey);
             return;
         }
         if ((!evt.ctrlKey && !evt.metaKey) || this.props.stateManager.lockObject.lock) {
@@ -50287,6 +50366,9 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this.updateTransform();
     }
     onMove(evt) {
+        if (this.stateManager.modalIsDisplayed) {
+            return;
+        }
         // Selection box
         if (this._selectionBox) {
             const rootRect = this.canvasContainer.getBoundingClientRect();
@@ -50375,6 +50457,9 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this._mouseStartPointY = evt.clientY;
     }
     onDown(evt) {
+        if (this.stateManager.modalIsDisplayed) {
+            return;
+        }
         this._rootContainer.setPointerCapture(evt.pointerId);
         // Port dragging
         if (evt.nativeEvent.srcElement && evt.nativeEvent.srcElement.nodeName === "IMG") {
@@ -50443,6 +50528,9 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this._mouseStartPointY = evt.clientY;
     }
     onUp(evt) {
+        if (this.stateManager.modalIsDisplayed) {
+            return;
+        }
         this._mouseStartPointX = null;
         this._mouseStartPointY = null;
         this._rootContainer.releasePointerCapture(evt.pointerId);
@@ -50487,6 +50575,9 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         }
     }
     onWheel(evt) {
+        if (this.stateManager.modalIsDisplayed) {
+            return;
+        }
         const delta = evt.deltaY < 0 ? 0.1 : -0.1;
         const oldZoom = this.zoom;
         this.zoom = Math.min(Math.max(this._minZoom, this.zoom + delta * this.zoom), this._maxZoom);
@@ -50733,7 +50824,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this.stateManager.onSelectionChangedObservable.notifyObservers({ selection: frame });
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: this._hostCanvasRef, id: "graph-canvas", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["graph-canvas"], onWheel: (evt) => this.onWheel(evt), onPointerMove: (evt) => this.onMove(evt), onPointerDown: (evt) => this.onDown(evt), onPointerUp: (evt) => this.onUp(evt), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "graph-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["graph-container"], ref: this._rootContainerRef, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "graph-canvas-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["graph-canvas-container"], ref: this._graphCanvasRef }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "frame-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["frame-container"], ref: this._frameContainerRef }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg", { id: "graph-svg-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["graph-svg-container"], ref: this._svgCanvasRef }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "selection-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["selection-container"], ref: this._selectionContainerRef })] }) }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { ref: this._hostCanvasRef, id: "graph-canvas", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["graph-canvas"], onWheel: (evt) => this.onWheel(evt), onPointerMove: (evt) => this.onMove(evt), onPointerDown: (evt) => this.onDown(evt), onPointerUp: (evt) => this.onUp(evt), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "graph-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["graph-container"], ref: this._rootContainerRef, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "graph-canvas-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["graph-canvas-container"], ref: this._graphCanvasRef }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "frame-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["frame-container"], ref: this._frameContainerRef }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg", { id: "graph-svg-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["graph-svg-container"], ref: this._svgCanvasRef }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "selection-container", className: _graphCanvas_modules_scss__WEBPACK_IMPORTED_MODULE_10__["default"]["selection-container"], ref: this._selectionContainerRef })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_searchBox__WEBPACK_IMPORTED_MODULE_14__.SearchBoxComponent, { stateManager: this.stateManager })] }));
     }
 }
 GraphCanvasComponent.NodeWidth = 100;
@@ -52595,6 +52686,25 @@ var PortDataDirection;
 })(PortDataDirection || (PortDataDirection = {}));
 
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodeLedger.js":
+/*!**************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodeLedger.js ***!
+  \**************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "NodeLedger": () => (/* binding */ NodeLedger)
+/* harmony export */ });
+class NodeLedger {
+}
+NodeLedger.RegisteredNodeNames = [];
+NodeLedger.NameFormatter = (name) => name;
+
+
 /***/ }),
 
 /***/ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodeLink.js":
@@ -52960,6 +53070,108 @@ class PropertyLedger {
 PropertyLedger.RegisteredControls = {};
 
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.js":
+/*!*************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.js ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "SearchBoxComponent": () => (/* binding */ SearchBoxComponent)
+/* 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 _searchBox_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./searchBox.scss */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.scss");
+/* harmony import */ var _nodeLedger__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./nodeLedger */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodeLedger.js");
+
+
+
+
+/**
+ * The search box component.
+ */
+class SearchBoxComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
+    constructor(props) {
+        super(props);
+        this.state = { isVisible: false, filter: "" };
+        this._handleEscKey = (evt) => {
+            if (evt.key === "Escape") {
+                this.hide();
+            }
+        };
+        this.props.stateManager.onSearchBoxRequiredObservable.add((loc) => {
+            this._targetX = loc.x;
+            this._targetY = loc.y;
+            this.setState({ isVisible: true, filter: "" });
+            this.props.stateManager.hostDocument.addEventListener("keydown", this._handleEscKey);
+        });
+    }
+    hide() {
+        this.setState({ isVisible: false });
+        this.props.stateManager.modalIsDisplayed = false;
+        this.props.stateManager.hostDocument.removeEventListener("keydown", this._handleEscKey);
+    }
+    onFilterChange(evt) {
+        this.setState({ filter: evt.target.value });
+    }
+    onNewNodeRequested(name) {
+        this.props.stateManager.onNewBlockRequiredObservable.notifyObservers({
+            type: name,
+            targetX: this._targetX,
+            targetY: this._targetY,
+            needRepositioning: true,
+            smartAdd: true,
+        });
+        this.hide();
+    }
+    onKeyDown(evt) {
+        if (evt.code === "Enter" && this._nodes.length > 0) {
+            this.onNewNodeRequested(this._nodes[0]);
+            return;
+        }
+    }
+    render() {
+        if (!this.state.isVisible) {
+            return null;
+        }
+        const expectedWidth = 300;
+        const expectedHeight = 400;
+        // Sort and deduplicate the node names.
+        this._nodes = Array.from(new Set(_nodeLedger__WEBPACK_IMPORTED_MODULE_3__.NodeLedger.RegisteredNodeNames.sort()));
+        if (this.state.filter) {
+            const filter = this.state.filter.toLowerCase().trim();
+            this._nodes = this._nodes.filter((name) => _nodeLedger__WEBPACK_IMPORTED_MODULE_3__.NodeLedger.NameFormatter(name).toLowerCase().includes(filter));
+        }
+        const containerRect = this.props.stateManager.hostDocument.getElementById("graph-canvas").getBoundingClientRect();
+        const targetX = this._targetX - (expectedWidth / 2 + containerRect.x);
+        const targetY = this._targetY - (expectedHeight / 2 + containerRect.y);
+        const locStyle = {
+            left: targetX + "px",
+            top: targetY + "px",
+        };
+        if (targetX + expectedWidth > containerRect.width) {
+            locStyle.left = containerRect.width - expectedWidth - 10 + "px";
+        }
+        else if (targetX < 10) {
+            locStyle.left = "10px";
+        }
+        if (targetY + expectedHeight > containerRect.height) {
+            locStyle.top = containerRect.height - expectedHeight - 10 + "px";
+        }
+        else if (targetY < 10) {
+            locStyle.top = "10px";
+        }
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "graph-search-container", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "graph-search-picking-blocker", onClick: () => this.hide() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "graph-search-box", style: locStyle, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "graph-search-box-title", children: "Add a node" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", placeholder: "Search...", onChange: (evt) => this.onFilterChange(evt), onKeyDown: (evt) => this.onKeyDown(evt), value: this.state.filter, className: "graph-search-box-filter", autoFocus: true, tabIndex: 0 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "graph-search-box-list", children: this._nodes.map((name) => {
+                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "graph-search-box-list-item ", onClick: () => this.onNewNodeRequested(name), children: _nodeLedger__WEBPACK_IMPORTED_MODULE_3__.NodeLedger.NameFormatter(name) }, name));
+                            }) })] })] }));
+    }
+}
+
+
 /***/ }),
 
 /***/ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/stateManager.js":
@@ -52978,6 +53190,7 @@ __webpack_require__.r(__webpack_exports__);
 
 class StateManager {
     constructor() {
+        this.onSearchBoxRequiredObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onSelectionChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onFrameCreatedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onUpdateRequiredObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -53964,7 +54177,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _sharedComponents_lineWithFileButtonComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../sharedComponents/lineWithFileButtonComponent */ "../../../tools/nodeEditor/dist/sharedComponents/lineWithFileButtonComponent.js");
 /* harmony import */ var _imgs_add_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../imgs/add.svg */ "../../../tools/nodeEditor/dist/imgs/add.svg");
 /* harmony import */ var _imgs_delete_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../imgs/delete.svg */ "../../../tools/nodeEditor/dist/imgs/delete.svg");
-/* harmony import */ var _nodeList_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./nodeList.scss */ "../../../tools/nodeEditor/dist/components/nodeList/nodeList.scss");
+/* harmony import */ var shared_ui_components_nodeGraphSystem_nodeLedger__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared-ui-components/nodeGraphSystem/nodeLedger */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodeLedger.js");
+/* harmony import */ var _nodeList_scss__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./nodeList.scss */ "../../../tools/nodeEditor/dist/components/nodeList/nodeList.scss");
 
 /* eslint-disable @typescript-eslint/naming-convention */
 
@@ -53977,6 +54191,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     constructor(props) {
         super(props);
@@ -54278,6 +54493,17 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             if (blockList.length) {
                 blockMenu.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: key.replace("__", ": ").replace("_", " "), closed: false, children: blockList }, key + " blocks"));
             }
+            // Register blocks
+            const ledger = shared_ui_components_nodeGraphSystem_nodeLedger__WEBPACK_IMPORTED_MODULE_9__.NodeLedger.RegisteredNodeNames;
+            for (const key in allBlocks) {
+                const blocks = allBlocks[key];
+                if (blocks.length) {
+                    ledger.push(...blocks);
+                }
+            }
+            shared_ui_components_nodeGraphSystem_nodeLedger__WEBPACK_IMPORTED_MODULE_9__.NodeLedger.NameFormatter = (name) => {
+                return name.replace("Block", "");
+            };
         }
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "nodeList", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "panes", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "filter", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", placeholder: "Filter", onFocus: () => (this.props.globalState.lockObject.lock = true), onBlur: () => {
                                     this.props.globalState.lockObject.lock = false;
@@ -56180,7 +56406,17 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 targetX = targetX - this._diagramContainer.offsetLeft;
                 targetY = targetY - this._diagramContainer.offsetTop;
             }
-            this.emitNewBlock(eventData.type, targetX, targetY);
+            const selectedLink = this._graphCanvas.selectedLink;
+            const selectedNode = this._graphCanvas.selectedNodes.length ? this._graphCanvas.selectedNodes[0] : null;
+            const newNode = this.emitNewBlock(eventData.type, targetX, targetY);
+            if (newNode && eventData.smartAdd) {
+                if (selectedLink) {
+                    this._graphCanvas.smartAddOverLink(newNode, selectedLink);
+                }
+                else if (selectedNode) {
+                    this._graphCanvas.smartAddOverNode(newNode, selectedNode);
+                }
+            }
         });
         this.props.globalState.stateManager.onRebuildRequiredObservable.add((autoConfigure) => {
             if (this.props.globalState.nodeMaterial) {
@@ -56450,6 +56686,7 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         // Drop
         this._graphCanvas.drop(newNode, targetX, targetY, offsetX, offsetY);
         this.forceUpdate();
+        return newNode;
     }
     dropNewBlock(event) {
         const data = event.dataTransfer.getData("babylonjs-material-node");
@@ -60010,6 +60247,61 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* 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);
 
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.scss":
+/*!***************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.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_searchBox_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]!./searchBox.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/nodeGraphSystem/searchBox.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_searchBox_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_searchBox_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_searchBox_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_searchBox_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "../../../tools/nodeEditor/dist/components/log/log.scss":