alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-21 20:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Move mask rendering before preview outlines

Browse Source 
The mask is now drawn after layers but before all preview outlines, ensuring correct visual stacking. The redundant mask rendering code after the preview outlines has been removed.
This commit is contained in:
Dariusz L
2025-07-27 21:23:05 +02:00
parent 8d6cd783ec
commit 19d1f9aa52
2 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/CanvasRenderer.ts
View File

@@ -61,6 +61,28 @@ export class CanvasRenderer {
// Use CanvasLayers to draw layers with proper blend area support
this.canvas.canvasLayers.drawLayersToContext(ctx, this.canvas.layers);
// Draw mask AFTER layers but BEFORE all preview outlines
const maskImage = this.canvas.maskTool.getMask();
if (maskImage && this.canvas.maskTool.isOverlayVisible) {
ctx.save();
if (this.canvas.maskTool.isActive) {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5;
} else {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 1.0;
}
// Renderuj maskę w jej pozycji światowej (bez przesunięcia względem bounds)
const maskWorldX = this.canvas.maskTool.x;
const maskWorldY = this.canvas.maskTool.y;
ctx.drawImage(maskImage, maskWorldX, maskWorldY);
ctx.globalAlpha = 1.0;
ctx.restore();
}
// Draw selection frames for selected layers
const sortedLayers = [...this.canvas.layers].sort((a, b) => a.zIndex - b.zIndex);
sortedLayers.forEach(layer => {
@@ -86,27 +108,6 @@ export class CanvasRenderer {
this.drawCanvasOutline(ctx);
this.drawOutputAreaExtensionPreview(ctx); // Draw extension preview
this.drawPendingGenerationAreas(ctx); // Draw snapshot outlines
const maskImage = this.canvas.maskTool.getMask();
if (maskImage && this.canvas.maskTool.isOverlayVisible) {
ctx.save();
if (this.canvas.maskTool.isActive) {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5;
} else {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 1.0;
}
// Renderuj maskę w jej pozycji światowej (bez przesunięcia względem bounds)
const maskWorldX = this.canvas.maskTool.x;
const maskWorldY = this.canvas.maskTool.y;
ctx.drawImage(maskImage, maskWorldX, maskWorldY);
ctx.globalAlpha = 1.0;
ctx.restore();
}
this.renderInteractionElements(ctx);
this.canvas.shapeTool.render(ctx);