@babylonjs/node-editor 6.17.1 → 6.19.0

package/dist/babylon.nodeEditor.max.js

@@ -1681,6 +1681,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.\\---------dev-sharedUiComponents-dis
   width: 20px;
   height: 20px;
   align-self: center;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 100%;
 }
 .\\---------dev-sharedUiComponents-dist-nodeGraphSystem-common-modules__port .\\---------dev-sharedUiComponents-dist-nodeGraphSystem-common-modules__img {
   width: 100%;
@@ -1741,7 +1744,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.\\---------dev-sharedUiComponents-dis
   grid-template-rows: 40px calc(100% - 40px);
   grid-template-columns: 100%;
   box-sizing: border-box;
-}`, "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/common.modules.scss"],"names":[],"mappings":"AAAA;EACI,wBAAA;AACJ;;AAEA;EACI,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AACJ;AACI;EACI,WAAA;AACR;AAEI;EAEI,qBAAA;AADR;;AAKA;EACI,YAAA;EACA,aAAA;EACA,wBAAA;AAFJ;;AAKA;EACI,mBAAA;AAFJ;;AAKA;EACI,WAAA;EACA,cAAA;AAFJ;AAII;EACI,6CAAA;AAFR;AAIQ;EACI,WAAA;EACA,cAAA;AAFZ;AAKQ;EACI,WAAA;EACA,cAAA;EACA,4BAAA;AAHZ;;AAQA;EACI,WAAA;EACA,cAAA;AALJ;AAOI;EACI,6CAAA;AALR;AAOQ;EACI,WAAA;EACA,cAAA;EACA,iBAAA;AALZ;AAQQ;EACI,WAAA;EACA,cAAA;EACA,0BAAA;AANZ;;AAWA;EACI,kBAAA;EACA,iCAAA;EACA,aAAA;EACA,0CAAA;EACA,2BAAA;EACA,sBAAA;AARJ","sourcesContent":[".hidden {\r\n    display: none !important;\r\n}\r\n\r\n.port {\r\n    border-radius: 20px;\r\n    width: 20px;\r\n    height: 20px;\r\n    align-self: center;\r\n\r\n    .img {\r\n        width: 100%;\r\n    }\r\n\r\n    &:hover,\r\n    &.selected {\r\n        filter: brightness(2);\r\n    }\r\n}\r\n\r\n.portLine {\r\n    height: 24px;\r\n    display: grid;\r\n    grid-template-rows: 100%;\r\n}\r\n\r\n.port-label {\r\n    align-items: center;\r\n}\r\n\r\n.inputsContainer {\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n\r\n    .portLine {\r\n        grid-template-columns: 12px calc(100% - 15px);\r\n\r\n        .port-label {\r\n            grid-row: 1;\r\n            grid-column: 2;\r\n        }\r\n\r\n        .port {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            transform: translateX(-12px);\r\n        }\r\n    }\r\n}\r\n\r\n.outputsContainer {\r\n    grid-row: 1;\r\n    grid-column: 2;\r\n\r\n    .portLine {\r\n        grid-template-columns: calc(100% - 10px) 12px;\r\n\r\n        .port-label {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            text-align: right;\r\n        }\r\n\r\n        .port {\r\n            grid-row: 1;\r\n            grid-column: 2;\r\n            transform: translateX(2px);\r\n        }\r\n    }\r\n}\r\n\r\n.frame-box {\r\n    position: absolute;\r\n    background: rgba(72, 72, 72, 0.7);\r\n    display: grid;\r\n    grid-template-rows: 40px calc(100% - 40px);\r\n    grid-template-columns: 100%;\r\n    box-sizing: border-box;\r\n}\r\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/common.modules.scss"],"names":[],"mappings":"AAAA;EACI,wBAAA;AACJ;;AAEA;EACI,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,aAAA;EACA,2BAAA;EACA,wBAAA;AACJ;AACI;EACI,WAAA;AACR;AAEI;EAEI,qBAAA;AADR;;AAKA;EACI,YAAA;EACA,aAAA;EACA,wBAAA;AAFJ;;AAKA;EACI,mBAAA;AAFJ;;AAKA;EACI,WAAA;EACA,cAAA;AAFJ;AAII;EACI,6CAAA;AAFR;AAIQ;EACI,WAAA;EACA,cAAA;AAFZ;AAKQ;EACI,WAAA;EACA,cAAA;EACA,4BAAA;AAHZ;;AAQA;EACI,WAAA;EACA,cAAA;AALJ;AAOI;EACI,6CAAA;AALR;AAOQ;EACI,WAAA;EACA,cAAA;EACA,iBAAA;AALZ;AAQQ;EACI,WAAA;EACA,cAAA;EACA,0BAAA;AANZ;;AAWA;EACI,kBAAA;EACA,iCAAA;EACA,aAAA;EACA,0CAAA;EACA,2BAAA;EACA,sBAAA;AARJ","sourcesContent":[".hidden {\r\n    display: none !important;\r\n}\r\n\r\n.port {\r\n    border-radius: 20px;\r\n    width: 20px;\r\n    height: 20px;\r\n    align-self: center;\r\n    display: grid;\r\n    grid-template-columns: 100%;\r\n    grid-template-rows: 100%;\r\n\r\n    .img {\r\n        width: 100%;\r\n    }\r\n\r\n    &:hover,\r\n    &.selected {\r\n        filter: brightness(2);\r\n    }\r\n}\r\n\r\n.portLine {\r\n    height: 24px;\r\n    display: grid;\r\n    grid-template-rows: 100%;\r\n}\r\n\r\n.port-label {\r\n    align-items: center;\r\n}\r\n\r\n.inputsContainer {\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n\r\n    .portLine {\r\n        grid-template-columns: 12px calc(100% - 15px);\r\n\r\n        .port-label {\r\n            grid-row: 1;\r\n            grid-column: 2;\r\n        }\r\n\r\n        .port {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            transform: translateX(-12px);\r\n        }\r\n    }\r\n}\r\n\r\n.outputsContainer {\r\n    grid-row: 1;\r\n    grid-column: 2;\r\n\r\n    .portLine {\r\n        grid-template-columns: calc(100% - 10px) 12px;\r\n\r\n        .port-label {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            text-align: right;\r\n        }\r\n\r\n        .port {\r\n            grid-row: 1;\r\n            grid-column: 2;\r\n            transform: translateX(2px);\r\n        }\r\n    }\r\n}\r\n\r\n.frame-box {\r\n    position: absolute;\r\n    background: rgba(72, 72, 72, 0.7);\r\n    display: grid;\r\n    grid-template-rows: 40px calc(100% - 40px);\r\n    grid-template-columns: 100%;\r\n    box-sizing: border-box;\r\n}\r\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"hidden": `---------dev-sharedUiComponents-dist-nodeGraphSystem-common-modules__hidden`,
@@ -2368,13 +2371,35 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.\\---------dev-sharedUiComponents-dis
   filter: brightness(2);
 }
 
+.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-nodePort-modules__pip {
+  background: green;
+  width: 6px;
+  height: 6px;
+  grid-row: 1;
+  grid-column: 1;
+  align-self: center;
+  justify-self: center;
+  border-radius: 7px;
+  border: 2px solid black;
+}
+.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-nodePort-modules__pip.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-nodePort-modules__hidden {
+  display: none;
+}
+
+img {
+  grid-row: 1;
+  grid-column: 1;
+}
+
 img.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-nodePort-modules__selected {
   box-shadow: 0 0 0 2px;
   border-radius: 50%;
-}`, "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodePort.modules.scss"],"names":[],"mappings":"AAAA;EACI,qBAAA;AACJ;;AAEA;EACI,qBAAA;EACA,kBAAA;AACJ","sourcesContent":[".selected {\r\n    filter: brightness(2);\r\n}\r\n\r\nimg.selected {\r\n    box-shadow: 0 0 0 2px;\r\n    border-radius: 50%;\r\n}\r\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodePort.modules.scss"],"names":[],"mappings":"AAAA;EACI,qBAAA;AACJ;;AAEA;EACI,iBAAA;EACA,UAAA;EACA,WAAA;EACA,WAAA;EACA,cAAA;EACA,kBAAA;EACA,oBAAA;EACA,kBAAA;EACA,uBAAA;AACJ;AACI;EACI,aAAA;AACR;;AAGA;EACI,WAAA;EACA,cAAA;AAAJ;;AAGA;EACI,qBAAA;EACA,kBAAA;AAAJ","sourcesContent":[".selected {\r\n    filter: brightness(2);\r\n}\r\n\r\n.pip {\r\n    background: green;\r\n    width: 6px;\r\n    height: 6px;\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n    align-self: center;\r\n    justify-self: center;\r\n    border-radius: 7px;\r\n    border: 2px solid black;\r\n\r\n    &.hidden {\r\n        display: none;\r\n    }\r\n}\r\n\r\nimg {\r\n    grid-row: 1;\r\n    grid-column: 1;\r\n}\r\n\r\nimg.selected {\r\n    box-shadow: 0 0 0 2px;\r\n    border-radius: 50%;\r\n}\r\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	"selected": `---------dev-sharedUiComponents-dist-nodeGraphSystem-nodePort-modules__selected`
+	"selected": `---------dev-sharedUiComponents-dist-nodeGraphSystem-nodePort-modules__selected`,
+	"pip": `---------dev-sharedUiComponents-dist-nodeGraphSystem-nodePort-modules__pip`,
+	"hidden": `---------dev-sharedUiComponents-dist-nodeGraphSystem-nodePort-modules__hidden`
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -55103,7 +55128,7 @@ class NodePort {
         return false;
     }
     refresh() {
-        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
+        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img, this._pip);
     }
     constructor(portContainer, portData, node, stateManager) {
         this.portData = portData;
@@ -55115,6 +55140,10 @@ class NodePort {
         this._stateManager = stateManager;
         this._img = portContainer.ownerDocument.createElement("img");
         this._element.appendChild(this._img);
+        this._pip = portContainer.ownerDocument.createElement("div");
+        this._pip.classList.add(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"]["pip"]);
+        this._pip.style.display = "none";
+        this._element.appendChild(this._pip);
         // determine if node name is editable
         if (portContainer.children[0].className === _common_modules_scss__WEBPACK_IMPORTED_MODULE_0__["default"]["port-label"]) {
             this._portLabelElement = portContainer.children[0];
@@ -55650,6 +55679,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 
 
 
@@ -55698,6 +55729,8 @@ class BlockTools {
                 return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.MorphTargetsBlock("MorphTargets");
             case "DiscardBlock":
                 return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.DiscardBlock("Discard");
+            case "PrePassTextureBlock":
+                return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.PrePassTextureBlock("PrePassTexture");
             case "ImageProcessingBlock":
                 return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.ImageProcessingBlock("ImageProcessing");
             case "ColorMergerBlock":
@@ -55720,6 +55753,8 @@ class BlockTools {
                 return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.VertexOutputBlock("VertexOutput");
             case "FragmentOutputBlock":
                 return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.FragmentOutputBlock("FragmentOutput");
+            case "PrePassOutputBlock":
+                return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.PrePassOutputBlock("PrePassOutput");
             case "AddBlock":
                 return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.AddBlock("Add");
             case "ClampBlock":
@@ -56395,6 +56430,10 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     removeItem(value) {
         const frameJson = localStorage.getItem("Custom-Frame-List");
         if (frameJson) {
+            const registeredIdx = shared_ui_components_nodeGraphSystem_nodeLedger__WEBPACK_IMPORTED_MODULE_9__.NodeLedger.RegisteredNodeNames.indexOf(value);
+            if (registeredIdx !== -1) {
+                shared_ui_components_nodeGraphSystem_nodeLedger__WEBPACK_IMPORTED_MODULE_9__.NodeLedger.RegisteredNodeNames.splice(registeredIdx, 1);
+            }
             const frameList = JSON.parse(frameJson);
             delete frameList[value];
             localStorage.removeItem(value);
@@ -56562,7 +56601,7 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 "MeshAttributeExistsBlock",
             ],
             Noises: ["RandomNumberBlock", "SimplexPerlin3DBlock", "WorleyNoise3DBlock", "CloudBlock", "VoronoiNoiseBlock"],
-            Output_Nodes: ["VertexOutputBlock", "FragmentOutputBlock", "DiscardBlock", "ClipPlanesBlock", "FragDepthBlock"],
+            Output_Nodes: ["VertexOutputBlock", "FragmentOutputBlock", "PrePassOutputBlock", "DiscardBlock", "ClipPlanesBlock", "FragDepthBlock"],
             Particle: [
                 "ParticleBlendMultiplyBlock",
                 "ParticleColorBlock",
@@ -56573,7 +56612,7 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 "ParticleUVBlock",
             ],
             PBR: ["PBRMetallicRoughnessBlock", "AnisotropyBlock", "ClearCoatBlock", "ReflectionBlock", "RefractionBlock", "SheenBlock", "SubSurfaceBlock"],
-            PostProcess: ["ScreenPositionBlock", "CurrentScreenBlock"],
+            PostProcess: ["ScreenPositionBlock", "CurrentScreenBlock", "PrePassTextureBlock"],
             Procedural__Texture: ["ScreenPositionBlock"],
             Range: ["ClampBlock", "RemapBlock", "NormalizeBlock"],
             Round: ["RoundBlock", "CeilingBlock", "FloorBlock"],
@@ -56601,6 +56640,7 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 delete allBlocks["Particle"];
                 delete allBlocks["Procedural__Texture"];
                 delete allBlocks["PBR"];
+                allBlocks.Output_Nodes.splice(allBlocks.Output_Nodes.indexOf("PrePassOutputBlock"), 1);
                 break;
             case core_Materials_Node_Enums_nodeMaterialModes__WEBPACK_IMPORTED_MODULE_4__.NodeMaterialModes.ProceduralTexture:
                 delete allBlocks["Animation"];
@@ -56608,6 +56648,7 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 delete allBlocks["Particle"];
                 delete allBlocks["PostProcess"];
                 delete allBlocks["PBR"];
+                allBlocks.Output_Nodes.splice(allBlocks.Output_Nodes.indexOf("PrePassOutputBlock"), 1);
                 break;
             case core_Materials_Node_Enums_nodeMaterialModes__WEBPACK_IMPORTED_MODULE_4__.NodeMaterialModes.Particle:
                 delete allBlocks["Animation"];
@@ -56618,6 +56659,7 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 allBlocks.Output_Nodes.splice(allBlocks.Output_Nodes.indexOf("VertexOutputBlock"), 1);
                 allBlocks.Scene.splice(allBlocks.Scene.indexOf("FogBlock"), 1);
                 allBlocks.Scene.splice(allBlocks.Scene.indexOf("FogColorBlock"), 1);
+                allBlocks.Output_Nodes.splice(allBlocks.Output_Nodes.indexOf("PrePassOutputBlock"), 1);
                 break;
         }
         // Create node menu
@@ -56655,11 +56697,25 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             for (const key in allBlocks) {
                 const blocks = allBlocks[key];
                 if (blocks.length) {
-                    ledger.push(...blocks);
+                    for (const block of blocks) {
+                        if (!ledger.includes(block)) {
+                            ledger.push(block);
+                        }
+                    }
                 }
             }
             shared_ui_components_nodeGraphSystem_nodeLedger__WEBPACK_IMPORTED_MODULE_9__.NodeLedger.NameFormatter = (name) => {
-                return name.replace("Block", "");
+                let finalName = name;
+                // custom frame
+                if (name.endsWith("Custom")) {
+                    const nameIndex = name.lastIndexOf("Custom");
+                    finalName = name.substring(0, nameIndex);
+                    finalName += " [custom]";
+                }
+                else {
+                    finalName = name.replace("Block", "");
+                }
+                return finalName;
             };
         }
         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: () => {
@@ -56696,6 +56752,7 @@ NodeListComponent._Tooltips = {
     DeltaTimeBlock: "A float representing the time that has passed since the last frame was rendered",
     Float: "A floating point number representing a value with a fractional component",
     TextureBlock: "A node for reading a linked or embedded texture file",
+    PrePassTextureBlock: "A node for reading textures from the prepass",
     TimeBlock: "A float value that represents the time that has passed since the scene was loaded (it is incremented by 0.6 each second)",
     RealTimeBlock: "A float value that represents the number of seconds that have elapsed since the engine was initialized",
     Vector2: "a vector composed of X and Y channels",
@@ -56730,6 +56787,7 @@ NodeListComponent._Tooltips = {
     WorldPosition: "A Vector4 representing the position of each vertex of the attached mesh transformed into world space",
     DiscardBlock: "A final node that will not output a pixel below the cutoff value",
     FragmentOutputBlock: "A mandatory final node for outputing the color of each pixel",
+    PrePassOutputBlock: "An optional final node for outputing geometry data on prepass textures",
     VertexOutputBlock: "A mandatory final node for outputing the position of each vertex",
     ClampBlock: "Outputs values above the maximum or below minimum as maximum or minimum values respectively",
     NormalizeBlock: "Remaps the length of a vector or color to 1",
@@ -58871,7 +58929,8 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                     }
                 }
             }
-            block.autoConfigure(this.props.globalState.nodeMaterial);
+            // Don't allow blocks to automatically connect to other blocks that are inside frames
+            block.autoConfigure(this.props.globalState.nodeMaterial, (filterBlock) => !this._graphCanvas.nodes.some((node) => node.enclosingFrameId >= 0 && node.content.data.uniqueId === filterBlock.uniqueId));
             newNode = this.appendBlock(block);
             newNode.addClassToVisual(block.getClassName());
         }
@@ -59044,7 +59103,7 @@ class ConnectionPointPortData {
     get name() {
         const block = this.data.ownerBlock;
         let portName = this.data.displayName || this.data.name;
-        if (this.data.ownerBlock.isInput) {
+        if (this.data.ownerBlock.isInput && this.data.ownerBlock.inputs.length === 1) {
             portName = block.name;
         }
         return portName;