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

Add 'fit on add' option for image placement

Browse Source 
Introduces a 'fit_on_add' boolean option to control whether images are fit to the canvas when added or pasted. Updates image addition and paste logic in Canvas, CanvasLayers, and CanvasView to support new placement modes ('fit', 'center', 'mouse', 'default').
This commit is contained in:
Dariusz L
2025-06-28 19:48:57 +02:00
parent 8ead4176b5
commit 4376a21147
4 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
js/CanvasLayers.js
View File

@@ -66,7 +66,7 @@ export class CanvasLayers {
log.info(`Pasted ${newLayers.length} layer(s).`);
}
async handlePaste(pasteMode = 'mouse') {
async handlePaste(addMode = 'mouse') {
try {
if (!navigator.clipboard?.read) {
log.info("Browser does not support clipboard read API. Falling back to internal paste.");
@@ -86,15 +86,7 @@ export class CanvasLayers {
reader.onload = (event) => {
const img = new Image();
img.onload = async () => {
let layerProps = {};
if (pasteMode === 'center') {
layerProps.x = (this.canvasLayers.width - img.width) / 2;
layerProps.y = (this.canvasLayers.height - img.height) / 2;
} else { // 'mouse' or default
layerProps.x = this.canvasLayers.lastMousePosition.x - img.width / 2;
layerProps.y = this.canvasLayers.lastMousePosition.y - img.height / 2;
}
await this.addLayerWithImage(img, layerProps);
await this.addLayerWithImage(img, {}, addMode);
};
img.src = event.target.result;
};
@@ -113,23 +105,41 @@ export class CanvasLayers {
}
}
addLayerWithImage = withErrorHandling(async (image, layerProps = {}) => {
addLayerWithImage = withErrorHandling(async (image, layerProps = {}, addMode = 'default') => {
if (!image) {
throw createValidationError("Image is required for layer creation");
}
log.debug("Adding layer with image:", image);
log.debug("Adding layer with image:", image, "with mode:", addMode);
const imageId = generateUUID();
await saveImage(imageId, image.src);
this.canvasLayers.imageCache.set(imageId, image.src);
let finalWidth = image.width;
let finalHeight = image.height;
let finalX, finalY;
if (addMode === 'fit') {
const scale = Math.min(this.canvasLayers.width / image.width, this.canvasLayers.height / image.height);
finalWidth = image.width * scale;
finalHeight = image.height * scale;
finalX = (this.canvasLayers.width - finalWidth) / 2;
finalY = (this.canvasLayers.height - finalHeight) / 2;
} else if (addMode === 'mouse') {
finalX = this.canvasLayers.lastMousePosition.x - finalWidth / 2;
finalY = this.canvasLayers.lastMousePosition.y - finalHeight / 2;
} else { // 'center' or 'default'
finalX = (this.canvasLayers.width - finalWidth) / 2;
finalY = (this.canvasLayers.height - finalHeight) / 2;
}
const layer = {
image: image,
imageId: imageId,
x: (this.canvasLayers.width - image.width) / 2,
y: (this.canvasLayers.height - image.height) / 2,
width: image.width,
height: image.height,
x: finalX,
y: finalY,
width: finalWidth,
height: finalHeight,
rotation: 0,
zIndex: this.canvasLayers.layers.length,
blendMode: 'normal',