From 60c3fcb3b45b8103b4d6fdc7dac12dfc2851fb40 Mon Sep 17 00:00:00 2001 From: Deltakosh Date: Mon, 25 Nov 2024 10:02:02 -0800 Subject: [PATCH 1/3] New visual clue for type conversions --- .../Blocks/Fragment/fragmentOutputBlock.ts | 8 +-- .../src/nodeGraphSystem/nodeLink.ts | 54 ++++++++++++++++++- 2 files changed, 57 insertions(+), 5 deletions(-) diff --git a/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts b/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts index b5161d6cc6d..2f1f18049f4 100644 --- a/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts +++ b/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts @@ -40,11 +40,11 @@ export class FragmentOutputBlock extends NodeMaterialBlock { super(name, NodeMaterialBlockTargets.Fragment, true); this.registerInput("rgba", NodeMaterialBlockConnectionPointTypes.Color4, true); - this.registerInput("rgb", NodeMaterialBlockConnectionPointTypes.AutoDetect, true); + this.registerInput("rgb", NodeMaterialBlockConnectionPointTypes.Vector3, true); this.registerInput("a", NodeMaterialBlockConnectionPointTypes.Float, true); - this.rgb.addExcludedConnectionPointFromAllowedTypes( - NodeMaterialBlockConnectionPointTypes.Color3 | NodeMaterialBlockConnectionPointTypes.Vector3 | NodeMaterialBlockConnectionPointTypes.Float - ); + + this.rgb.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Color3); + this.rgb.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Float); } /** Gets or sets a boolean indicating if content needs to be converted to gamma space */ diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/nodeLink.ts b/packages/dev/sharedUiComponents/src/nodeGraphSystem/nodeLink.ts index 525f47bc377..5accd2c9df9 100644 --- a/packages/dev/sharedUiComponents/src/nodeGraphSystem/nodeLink.ts +++ b/packages/dev/sharedUiComponents/src/nodeGraphSystem/nodeLink.ts @@ -21,6 +21,7 @@ export class NodeLink { private _onSelectionChangedObserver: Nullable>>; private _isVisible = true; private _isTargetCandidate = false; + private _gradient: Nullable; public onDisposedObservable = new Observable(); @@ -130,7 +131,52 @@ export class NodeLink { this._path.setAttribute("d", `M${startX},${startY} C${startX + tangentLength},${startY} ${endX - tangentLength},${endY} ${endX},${endY}`); this._selectionPath.setAttribute("d", `M${startX},${startY} C${startX + tangentLength},${startY} ${endX - tangentLength},${endY} ${endX},${endY}`); } - this._path.setAttribute("stroke", this._portA.element.style.backgroundColor!); + + // No red as it means no type yet + let extractedColorB = ""; + if (this._portB) { + extractedColorB = this._portB?.element.style.backgroundColor.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/, "$1_$2_$3"); + const splitComponents = extractedColorB.split("_").map((v) => parseInt(v)); + if (splitComponents[0] > 0 && splitComponents[1] === 0 && splitComponents[2] === 0) { + extractedColorB = ""; + } + } + + if (extractedColorB && this._portA.element.style.backgroundColor !== this._portB?.element.style.backgroundColor) { + // Gradient + const svg = this._graphCanvas.svgCanvas; + const defs = svg.querySelector("defs") || svg.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "defs")); + + if (!this._gradient) { + this._gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient"); + defs.appendChild(this._gradient); + const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); + this._gradient.appendChild(stop1); + const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); + this._gradient.appendChild(stop2); + } + + const stop1 = this._gradient.children[0] as SVGStopElement; + const stop2 = this._gradient.children[1] as SVGStopElement; + + const gradientId = `linkGradient_${this._portA.element.style.backgroundColor.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/, "$1_$2_$3")}_${extractedColorB}`; + this._gradient.id = gradientId; + + this._gradient.setAttribute("x1", startX < endX ? "0" : "1"); + this._gradient.setAttribute("y1", "0"); + this._gradient.setAttribute("x2", startX < endX ? "1" : "0"); + this._gradient.setAttribute("y2", "0"); + + stop1.setAttribute("offset", "0%"); + stop1.setAttribute("stop-color", this._portA.element.style.backgroundColor!); + + stop2.setAttribute("offset", "100%"); + stop2.setAttribute("stop-color", this._portB?.element.style.backgroundColor!); + + this._path.setAttribute("stroke", `url(#${gradientId})`); + } else { + this._path.setAttribute("stroke", this._portA.element.style.backgroundColor!); + } } public get path() { @@ -258,6 +304,12 @@ export class NodeLink { this._selectionPath.parentElement.removeChild(this._selectionPath); } + if (this._gradient) { + if (this._gradient.parentElement) { + this._gradient.parentElement.removeChild(this._gradient); + } + } + if (this._nodeB) { this._nodeA.links.splice(this._nodeA.links.indexOf(this), 1); this._nodeB.links.splice(this._nodeB.links.indexOf(this), 1); From 49bb5448d9975521c1e816750bbed403c15538a6 Mon Sep 17 00:00:00 2001 From: Deltakosh Date: Mon, 25 Nov 2024 10:47:55 -0800 Subject: [PATCH 2/3] Fixed build --- packages/dev/core/src/Materials/Node/nodeMaterialBlock.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/dev/core/src/Materials/Node/nodeMaterialBlock.ts b/packages/dev/core/src/Materials/Node/nodeMaterialBlock.ts index ace30308516..b4f7d8cf9e8 100644 --- a/packages/dev/core/src/Materials/Node/nodeMaterialBlock.ts +++ b/packages/dev/core/src/Materials/Node/nodeMaterialBlock.ts @@ -351,7 +351,12 @@ export class NodeMaterialBlock { public getFirstAvailableInput(forOutput: Nullable = null) { for (const input of this._inputs) { if (!input.connectedPoint) { - if (!forOutput || forOutput.type === input.type || input.type === NodeMaterialBlockConnectionPointTypes.AutoDetect) { + if ( + !forOutput || + forOutput.type === input.type || + input.type === NodeMaterialBlockConnectionPointTypes.AutoDetect || + input.acceptedConnectionPointTypes.indexOf(forOutput.type) !== -1 + ) { return input; } } From b96d506383406df9a818336337dfefbc6d36e21c Mon Sep 17 00:00:00 2001 From: Deltakosh Date: Mon, 25 Nov 2024 10:48:49 -0800 Subject: [PATCH 3/3] Address fedback --- .../src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts b/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts index 2f1f18049f4..32ece597ea2 100644 --- a/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts +++ b/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts @@ -40,10 +40,10 @@ export class FragmentOutputBlock extends NodeMaterialBlock { super(name, NodeMaterialBlockTargets.Fragment, true); this.registerInput("rgba", NodeMaterialBlockConnectionPointTypes.Color4, true); - this.registerInput("rgb", NodeMaterialBlockConnectionPointTypes.Vector3, true); + this.registerInput("rgb", NodeMaterialBlockConnectionPointTypes.Color3, true); this.registerInput("a", NodeMaterialBlockConnectionPointTypes.Float, true); - this.rgb.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Color3); + this.rgb.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector3); this.rgb.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Float); }