@babylonjs/node-editor 6.5.0 → 6.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -59,7 +59,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
59
59
|
|
|
60
60
|
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()));
|
|
61
61
|
// Module
|
|
62
|
-
___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}\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}\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: rgb(72, 72, 72);\n border: 2px solid black;\n z-index: 100;\n cursor: auto;\n display: grid;\n grid-template-rows: auto auto 1fr;\n}\n#graph-search-container #graph-search-box .graph-search-box-title {\n border-bottom: 1px solid rgb(40, 40, 40);\n margin: 4px;\n padding-bottom: 4px;\n color: white;\n grid-row: 1;\n}\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}\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}\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}\n#graph-search-container #graph-search-box .graph-search-box-list .graph-search-box-list-item:hover {\n background: rgb(30, 30, 30);\n}", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.scss"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,MAAA;AACJ;AACI;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;AACR;AAEI;EACI,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uBAAA;EACA,sBAAA;EACA,2BAAA;EACA,uBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,iCAAA;AAAR;AAEQ;EACI,wCAAA;EACA,WAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;AAAZ;AAGQ;EACI,WAAA;EACA,mBAAA;EACA,kBAAA;EACA,wBAAA;EACA,WAAA;AADZ;AAIQ;EACI,WAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;AAFZ;AAIY;EACI,gBAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AAFhB;AAIgB;EACI,2BAAA;AAFpB","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":""}]);
|
|
62
|
+
___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}\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}\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: rgb(72, 72, 72);\n border: 2px solid black;\n z-index: 100;\n cursor: auto;\n display: grid;\n grid-template-rows: auto auto 1fr;\n}\n#graph-search-container #graph-search-box .graph-search-box-title {\n border-bottom: 1px solid rgb(40, 40, 40);\n margin: 4px;\n padding-bottom: 4px;\n color: white;\n grid-row: 1;\n}\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}\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}\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}\n#graph-search-container #graph-search-box .graph-search-box-list .graph-search-box-list-item:hover {\n background: rgb(30, 30, 30);\n}\n#graph-search-container #graph-search-box .graph-search-box-list .graph-search-box-list-item.selected {\n background: rgb(230, 230, 230);\n color: black;\n}", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/searchBox.scss"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,MAAA;AACJ;AACI;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;AACR;AAEI;EACI,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uBAAA;EACA,sBAAA;EACA,2BAAA;EACA,uBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,iCAAA;AAAR;AAEQ;EACI,wCAAA;EACA,WAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;AAAZ;AAGQ;EACI,WAAA;EACA,mBAAA;EACA,kBAAA;EACA,wBAAA;EACA,WAAA;AADZ;AAIQ;EACI,WAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;AAFZ;AAIY;EACI,gBAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AAFhB;AAIgB;EACI,2BAAA;AAFpB;AAKgB;EACI,8BAAA;EACA,YAAA;AAHpB","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 &.selected {\r\n background: rgb(230, 230, 230);\r\n color: black;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"],"sourceRoot":""}]);
|
|
63
63
|
// Exports
|
|
64
64
|
___CSS_LOADER_EXPORT___.locals = {};
|
|
65
65
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
|
@@ -50168,7 +50168,6 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50168
50168
|
}
|
|
50169
50169
|
// Graph
|
|
50170
50170
|
const node = this.appendNode(nodeData);
|
|
50171
|
-
node.addClassToVisual(nodeData.getClassName());
|
|
50172
50171
|
// Links
|
|
50173
50172
|
if (nodeData.inputs.length && recursion) {
|
|
50174
50173
|
for (const input of nodeData.inputs) {
|
|
@@ -50268,6 +50267,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50268
50267
|
appendNode(nodeData) {
|
|
50269
50268
|
const newNode = new _graphNode__WEBPACK_IMPORTED_MODULE_2__.GraphNode(nodeData, this.props.stateManager);
|
|
50270
50269
|
newNode.appendVisual(this._graphCanvas, this);
|
|
50270
|
+
newNode.addClassToVisual(nodeData.getClassName());
|
|
50271
50271
|
this._nodes.push(newNode);
|
|
50272
50272
|
this._nodeDataContentList.push(nodeData.data);
|
|
50273
50273
|
return newNode;
|
|
@@ -53101,7 +53101,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
53101
53101
|
class SearchBoxComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
53102
53102
|
constructor(props) {
|
|
53103
53103
|
super(props);
|
|
53104
|
-
this.state = { isVisible: false, filter: "" };
|
|
53104
|
+
this.state = { isVisible: false, filter: "", selectedIndex: 0 };
|
|
53105
53105
|
this._handleEscKey = (evt) => {
|
|
53106
53106
|
if (evt.key === "Escape") {
|
|
53107
53107
|
this.hide();
|
|
@@ -53110,7 +53110,7 @@ class SearchBoxComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
53110
53110
|
this.props.stateManager.onSearchBoxRequiredObservable.add((loc) => {
|
|
53111
53111
|
this._targetX = loc.x;
|
|
53112
53112
|
this._targetY = loc.y;
|
|
53113
|
-
this.setState({ isVisible: true, filter: "" });
|
|
53113
|
+
this.setState({ isVisible: true, filter: "", selectedIndex: 0 });
|
|
53114
53114
|
this.props.stateManager.hostDocument.addEventListener("keydown", this._handleEscKey);
|
|
53115
53115
|
});
|
|
53116
53116
|
}
|
|
@@ -53134,7 +53134,15 @@ class SearchBoxComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
53134
53134
|
}
|
|
53135
53135
|
onKeyDown(evt) {
|
|
53136
53136
|
if (evt.code === "Enter" && this._nodes.length > 0) {
|
|
53137
|
-
this.onNewNodeRequested(this._nodes[
|
|
53137
|
+
this.onNewNodeRequested(this._nodes[this.state.selectedIndex]);
|
|
53138
|
+
return;
|
|
53139
|
+
}
|
|
53140
|
+
if (evt.code === "ArrowDown" && this._nodes.length > 0) {
|
|
53141
|
+
this.setState({ selectedIndex: Math.min(this.state.selectedIndex + 1, this._nodes.length - 1) });
|
|
53142
|
+
return;
|
|
53143
|
+
}
|
|
53144
|
+
if (evt.code === "ArrowUp" && this._nodes.length > 0) {
|
|
53145
|
+
this.setState({ selectedIndex: Math.max(this.state.selectedIndex - 1, 0) });
|
|
53138
53146
|
return;
|
|
53139
53147
|
}
|
|
53140
53148
|
}
|
|
@@ -53169,8 +53177,8 @@ class SearchBoxComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
53169
53177
|
else if (targetY < 10) {
|
|
53170
53178
|
locStyle.top = "10px";
|
|
53171
53179
|
}
|
|
53172
|
-
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) => {
|
|
53173
|
-
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));
|
|
53180
|
+
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, i) => {
|
|
53181
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "graph-search-box-list-item " + (this.state.selectedIndex === i ? "selected " : ""), onClick: () => this.onNewNodeRequested(name), children: _nodeLedger__WEBPACK_IMPORTED_MODULE_3__.NodeLedger.NameFormatter(name) }, name));
|
|
53174
53182
|
}) })] })] }));
|
|
53175
53183
|
}
|
|
53176
53184
|
}
|