alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-25 06:22:14 -03:00
Code Issues Packages Projects Releases Wiki Activity

Layout change

Browse Source
This commit is contained in:
Dariusz L
2025-07-28 15:57:28 +02:00
parent bb687a768b
commit f57b9f6b58
8 changed files with 805 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
js/CanvasRenderer.js
View File

@@ -38,6 +38,27 @@ export class CanvasRenderer {
});
ctx.restore();
}
/**
* Helper function to draw rectangle with stroke style
* @param ctx Canvas context
* @param rect Rectangle bounds {x, y, width, height}
* @param options Styling options
*/
drawStyledRect(ctx, rect, options = {}) {
const { strokeStyle = "rgba(255, 255, 255, 0.8)", lineWidth = 2, dashPattern = null } = options;
ctx.save();
ctx.strokeStyle = strokeStyle;
ctx.lineWidth = lineWidth / this.canvas.viewport.zoom;
if (dashPattern) {
const scaledDash = dashPattern.map((d) => d / this.canvas.viewport.zoom);
ctx.setLineDash(scaledDash);
}
ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
if (dashPattern) {
ctx.setLineDash([]);
}
ctx.restore();
}
render() {
if (this.renderAnimationFrame) {
this.isDirty = true;
@@ -148,13 +169,11 @@ export class CanvasRenderer {
const interaction = this.canvas.interaction;
if (interaction.mode === 'resizingCanvas' && interaction.canvasResizeRect) {
const rect = interaction.canvasResizeRect;
ctx.save();
ctx.strokeStyle = 'rgba(0, 255, 0, 0.8)';
ctx.lineWidth = 2 / this.canvas.viewport.zoom;
ctx.setLineDash([8 / this.canvas.viewport.zoom, 4 / this.canvas.viewport.zoom]);
ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
ctx.setLineDash([]);
ctx.restore();
this.drawStyledRect(ctx, rect, {
strokeStyle: 'rgba(0, 255, 0, 0.8)',
lineWidth: 2,
dashPattern: [8, 4]
});
if (rect.width > 0 && rect.height > 0) {
const text = `${Math.round(rect.width)}x${Math.round(rect.height)}`;
const textWorldX = rect.x + rect.width / 2;
@@ -166,13 +185,11 @@ export class CanvasRenderer {
}
if (interaction.mode === 'movingCanvas' && interaction.canvasMoveRect) {
const rect = interaction.canvasMoveRect;
ctx.save();
ctx.strokeStyle = 'rgba(0, 150, 255, 0.8)';
ctx.lineWidth = 2 / this.canvas.viewport.zoom;
ctx.setLineDash([10 / this.canvas.viewport.zoom, 5 / this.canvas.viewport.zoom]);
ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
ctx.setLineDash([]);
ctx.restore();
this.drawStyledRect(ctx, rect, {
strokeStyle: 'rgba(0, 150, 255, 0.8)',
lineWidth: 2,
dashPattern: [10, 5]
});
const text = `(${Math.round(rect.x)}, ${Math.round(rect.y)})`;
const textWorldX = rect.x + rect.width / 2;
const textWorldY = rect.y - (20 / this.canvas.viewport.zoom);
@@ -327,13 +344,11 @@ export class CanvasRenderer {
width: baseWidth + ext.left + ext.right,
height: baseHeight + ext.top + ext.bottom
};
ctx.save();
ctx.strokeStyle = 'rgba(255, 255, 0, 0.8)'; // Yellow color for preview
ctx.lineWidth = 3 / this.canvas.viewport.zoom;
ctx.setLineDash([8 / this.canvas.viewport.zoom, 4 / this.canvas.viewport.zoom]);
ctx.strokeRect(previewBounds.x, previewBounds.y, previewBounds.width, previewBounds.height);
ctx.setLineDash([]);
ctx.restore();
this.drawStyledRect(ctx, previewBounds, {
strokeStyle: 'rgba(255, 255, 0, 0.8)',
lineWidth: 3,
dashPattern: [8, 4]
});
}
drawPendingGenerationAreas(ctx) {
const areasToDraw = [];
@@ -354,12 +369,11 @@ export class CanvasRenderer {
}
// 3. Draw all collected areas
areasToDraw.forEach(area => {
ctx.save();
ctx.strokeStyle = 'rgba(0, 150, 255, 0.9)'; // Blue color
ctx.lineWidth = 3 / this.canvas.viewport.zoom;
ctx.setLineDash([12 / this.canvas.viewport.zoom, 6 / this.canvas.viewport.zoom]);
ctx.strokeRect(area.x, area.y, area.width, area.height);
ctx.restore();
this.drawStyledRect(ctx, area, {
strokeStyle: 'rgba(0, 150, 255, 0.9)',
lineWidth: 3,
dashPattern: [12, 6]
});
});
}
drawMaskAreaBounds(ctx) {
@@ -375,12 +389,11 @@ export class CanvasRenderer {
width: maskTool.getMask().width,
height: maskTool.getMask().height
};
ctx.save();
ctx.strokeStyle = 'rgba(255, 100, 100, 0.7)'; // Red color for mask area bounds
ctx.lineWidth = 2 / this.canvas.viewport.zoom;
ctx.setLineDash([6 / this.canvas.viewport.zoom, 6 / this.canvas.viewport.zoom]);
ctx.strokeRect(maskBounds.x, maskBounds.y, maskBounds.width, maskBounds.height);
ctx.setLineDash([]);
this.drawStyledRect(ctx, maskBounds, {
strokeStyle: 'rgba(255, 100, 100, 0.7)',
lineWidth: 2,
dashPattern: [6, 6]
});
// Add text label to show this is the mask drawing area
const textWorldX = maskBounds.x + maskBounds.width / 2;
const textWorldY = maskBounds.y - (10 / this.canvas.viewport.zoom);
@@ -389,6 +402,5 @@ export class CanvasRenderer {
backgroundColor: "rgba(255, 100, 100, 0.8)",
padding: 8
});
ctx.restore();
}
}