@babylonjs/node-editor 6.5.0 → 6.5.1
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___);
|
|
@@ -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
|
}
|