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

Fix custom shape output area extension and mask logic

Browse Source 
Refactors how custom output area shapes interact with extensions, ensuring the shape's position and mask application remain consistent when extensions are toggled. Moves output area shape logic to CanvasInteractions, tracks original shape position, and updates all rendering, IO, and mask operations to use the correct coordinates. Improves mask chunk clearing and adds chunked mask application/removal for shape masks, ensuring correct behavior with expansion and feathering.
This commit is contained in:
Dariusz L
2025-07-26 22:39:03 +02:00
parent f329a6ded5
commit f28783348e
12 changed files with 757 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
js/CanvasRenderer.js
View File

@@ -273,11 +273,16 @@ export class CanvasRenderer {
ctx.setLineDash([]);
const shape = this.canvas.outputAreaShape;
const bounds = this.canvas.outputAreaBounds;
// Calculate custom shape position accounting for extensions
// Custom shape should maintain its relative position within the original canvas area
const ext = this.canvas.outputAreaExtensionEnabled ? this.canvas.outputAreaExtensions : { top: 0, bottom: 0, left: 0, right: 0 };
const shapeOffsetX = bounds.x + ext.left; // Add left extension to maintain relative position
const shapeOffsetY = bounds.y + ext.top; // Add top extension to maintain relative position
ctx.beginPath();
// Render custom shape relative to outputAreaBounds, not (0,0)
ctx.moveTo(bounds.x + shape.points[0].x, bounds.y + shape.points[0].y);
// Render custom shape with extension offset to maintain relative position
ctx.moveTo(shapeOffsetX + shape.points[0].x, shapeOffsetY + shape.points[0].y);
for (let i = 1; i < shape.points.length; i++) {
ctx.lineTo(bounds.x + shape.points[i].x, bounds.y + shape.points[i].y);
ctx.lineTo(shapeOffsetX + shape.points[i].x, shapeOffsetY + shape.points[i].y);
}
ctx.closePath();
ctx.stroke();
@@ -321,10 +326,11 @@ export class CanvasRenderer {
const baseWidth = this.canvas.originalCanvasSize ? this.canvas.originalCanvasSize.width : this.canvas.width;
const baseHeight = this.canvas.originalCanvasSize ? this.canvas.originalCanvasSize.height : this.canvas.height;
const ext = this.canvas.outputAreaExtensionPreview;
// Podgląd pokazuje jak będą wyglądać nowe outputAreaBounds
// Calculate preview bounds relative to original custom shape position, not (0,0)
const originalPos = this.canvas.originalOutputAreaPosition;
const previewBounds = {
x: -ext.left, // Może być ujemne - wycinamy fragment świata
y: -ext.top, // Może być ujemne - wycinamy fragment świata
x: originalPos.x - ext.left, // ✅ Względem oryginalnej pozycji custom shape
y: originalPos.y - ext.top, // ✅ Względem oryginalnej pozycji custom shape
width: baseWidth + ext.left + ext.right,
height: baseHeight + ext.top + ext.bottom
};