nodes/AEmotionStudio-ComfyUI-ShaderNoiseKSampler
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Adjust shader canvas drawing order to render on top of the node's title gradient.

Browse Source
This commit is contained in:
Æmotion Studio
2026-03-24 16:23:57 -07:00
parent 0d31532aa3
commit 3bfb894b96
4 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "comfyui-shadernoiseksampler-web",
"version": "1.0.1",
"version": "1.0.2",
"type": "module",
"description": "TypeScript frontend for ComfyUI ShaderNoiseKSampler custom nodes",
"scripts": {
pyproject.toml
+1 -1
View File
@@ -1,7 +1,7 @@
[project]
name = "comfyui-shadernoiseksampler"
description = "Transform AI image generation from random exploration into deliberate artistic navigation. This advanced KSampler replacement blends traditional noise with shader noise. Navigate latent space with intention using adjustable noise parameters, shape masks, and colors transformations."
version = "1.3.2"
version = "1.3.3"
license = {file = "LICENSE"}
[project.urls]
web/shader_renderer.js
+4 -2
View File
@@ -1465,6 +1465,9 @@ app.registerExtension({
nodeType.prototype.onDrawForeground = function (ctx) {
if (this.properties?.shaderVisible && this.shaderCanvas && !this.flags?.collapsed) {
this.isShaderActive = true;
// Call origOnDrawForeground FIRST so gradient title acts as background
if (origOnDrawForeground)
origOnDrawForeground.call(this, ctx);
// Render shader synchronously before drawing to ensure fresh content
this.renderShader();
if (!this.animationFrameId) {
@@ -1481,12 +1484,11 @@ app.registerExtension({
const baseSize = origComputeSize ? origComputeSize.call(this, [this.size[0], 0]) : [this.size[0], 0];
const shaderY = baseSize[1];
const shaderHeight = Math.max(50, this.size[1] - shaderY);
// Draw shader canvas AFTER origOnDrawForeground so it renders on top of the gradient
try {
ctx.drawImage(this.shaderCanvas, 0, shaderY, this.size[0], shaderHeight);
}
catch (e) { /* ignore */ }
if (origOnDrawForeground)
origOnDrawForeground.call(this, ctx);
}
else {
if (origOnDrawForeground)
web/src/shader_renderer.ts
+3 -1
View File
@@ -1523,6 +1523,8 @@ const FRAGMENT_SHADER_FOOTER = `
nodeType.prototype.onDrawForeground = function (this: ShaderRendererNode, ctx: CanvasRenderingContext2D) {
if (this.properties?.shaderVisible && this.shaderCanvas && !this.flags?.collapsed) {
this.isShaderActive = true;
// Call origOnDrawForeground FIRST so gradient title acts as background
if (origOnDrawForeground) origOnDrawForeground.call(this, ctx);
// Render shader synchronously before drawing to ensure fresh content
this.renderShader();
if (!this.animationFrameId) {
@@ -1536,8 +1538,8 @@ const FRAGMENT_SHADER_FOOTER = `
const baseSize = origComputeSize ? origComputeSize.call(this, [this.size[0], 0]) : [this.size[0], 0];
const shaderY = baseSize[1];
const shaderHeight = Math.max(50, this.size[1] - shaderY);
// Draw shader canvas AFTER origOnDrawForeground so it renders on top of the gradient
try { ctx.drawImage(this.shaderCanvas, 0, shaderY, this.size[0], shaderHeight); } catch (e) { /* ignore */ }
if (origOnDrawForeground) origOnDrawForeground.call(this, ctx);
} else {
if (origOnDrawForeground) origOnDrawForeground.call(this, ctx);
this.isShaderActive = false;