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 selection border points for vertical/horizontal flip

Browse Source
This commit is contained in:
Dariusz L
2025-08-04 00:46:14 +02:00
parent 2427f0bc5f
commit df6979a59b
6 changed files with 134 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
js/CanvasInteractions.js
View File

@@ -742,8 +742,14 @@ export class CanvasInteractions {
// Rotate mouse delta into the layer's unrotated frame
const deltaX_world = mouseX_local - dragStartX_local;
const deltaY_world = mouseY_local - dragStartY_local;
const mouseDeltaX_local = deltaX_world * cos + deltaY_world * sin;
const mouseDeltaY_local = deltaY_world * cos - deltaX_world * sin;
let mouseDeltaX_local = deltaX_world * cos + deltaY_world * sin;
let mouseDeltaY_local = deltaY_world * cos - deltaX_world * sin;
if (layer.flipH) {
mouseDeltaX_local *= -1;
}
if (layer.flipV) {
mouseDeltaY_local *= -1;
}
// Convert the on-screen mouse delta to an image-space delta.
const screenToImageScaleX = o.originalWidth / o.width;
const screenToImageScaleY = o.originalHeight / o.height;
@@ -751,18 +757,38 @@ export class CanvasInteractions {
const delta_image_y = mouseDeltaY_local * screenToImageScaleY;
let newCropBounds = { ...o.cropBounds }; // Start with the bounds from the beginning of the drag
// Apply the image-space delta to the appropriate edges of the crop bounds
const isFlippedH = layer.flipH;
const isFlippedV = layer.flipV;
if (handle?.includes('w')) {
if (isFlippedH)
newCropBounds.width += delta_image_x;
else {
newCropBounds.x += delta_image_x;
newCropBounds.width -= delta_image_x;
}
}
if (handle?.includes('e')) {
if (isFlippedH) {
newCropBounds.x += delta_image_x;
newCropBounds.width -= delta_image_x;
}
else
newCropBounds.width += delta_image_x;
}
if (handle?.includes('n')) {
if (isFlippedV)
newCropBounds.height += delta_image_y;
else {
newCropBounds.y += delta_image_y;
newCropBounds.height -= delta_image_y;
}
}
if (handle?.includes('s')) {
if (isFlippedV) {
newCropBounds.y += delta_image_y;
newCropBounds.height -= delta_image_y;
}
else
newCropBounds.height += delta_image_y;
}
// Clamp crop bounds to stay within the original image and maintain minimum size

11
js/CanvasLayers.js
View File

@@ -1036,9 +1036,16 @@ export class CanvasLayers {
const layerScaleY = layer.height / layer.originalHeight;
const cropRectW = layer.cropBounds.width * layerScaleX;
const cropRectH = layer.cropBounds.height * layerScaleY;
// Effective crop bounds start position, accounting for flips.
const effectiveCropX = layer.flipH
? layer.originalWidth - (layer.cropBounds.x + layer.cropBounds.width)
: layer.cropBounds.x;
const effectiveCropY = layer.flipV
? layer.originalHeight - (layer.cropBounds.y + layer.cropBounds.height)
: layer.cropBounds.y;
// Center of the CROP rectangle in the layer's local, un-rotated space
const cropCenterX_local = (-layer.width / 2) + ((layer.cropBounds.x + layer.cropBounds.width / 2) * layerScaleX);
const cropCenterY_local = (-layer.height / 2) + ((layer.cropBounds.y + layer.cropBounds.height / 2) * layerScaleY);
const cropCenterX_local = (-layer.width / 2) + ((effectiveCropX + layer.cropBounds.width / 2) * layerScaleX);
const cropCenterY_local = (-layer.height / 2) + ((effectiveCropY + layer.cropBounds.height / 2) * layerScaleY);
// Rotate this local center to find the world-space center of the crop rect
handleCenterX = layerCenterX + (cropCenterX_local * cos - cropCenterY_local * sin);
handleCenterY = layerCenterY + (cropCenterX_local * sin + cropCenterY_local * cos);

28
js/CanvasRenderer.js
View File

@@ -467,8 +467,10 @@ export class CanvasRenderer {
// Draw line to rotation handle
ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(0, -halfH);
ctx.lineTo(0, -halfH - 20 / this.canvas.viewport.zoom);
const startY = layer.flipV ? halfH : -halfH;
const endY = startY + (layer.flipV ? 1 : -1) * (20 / this.canvas.viewport.zoom);
ctx.moveTo(0, startY);
ctx.lineTo(0, endY);
ctx.stroke();
}
// --- DRAW HANDLES (Unified Logic) ---
@@ -476,19 +478,29 @@ export class CanvasRenderer {
ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1 / this.canvas.viewport.zoom;
const centerX = layer.x + layer.width / 2;
const centerY = layer.y + layer.height / 2;
for (const key in handles) {
// Skip rotation handle in crop mode
if (layer.cropMode && key === 'rot')
continue;
const point = handles[key];
// The handle position is already in world space, we need it in the layer's rotated space
const localX = point.x - (layer.x + layer.width / 2);
const localY = point.y - (layer.y + layer.height / 2);
// The handle position is already in world space.
// We need to convert it to the layer's local, un-rotated space.
const dx = point.x - centerX;
const dy = point.y - centerY;
// "Un-rotate" the position to get it in the layer's local, un-rotated space
const rad = -layer.rotation * Math.PI / 180;
const rotatedX = localX * Math.cos(rad) - localY * Math.sin(rad);
const rotatedY = localX * Math.sin(rad) + localY * Math.cos(rad);
const cos = Math.cos(rad);
const sin = Math.sin(rad);
const localX = dx * cos - dy * sin;
const localY = dx * sin + dy * cos;
// The context is already flipped. We need to flip the coordinates
// to match the visual transformation, so the arc is drawn in the correct place.
const finalX = localX * (layer.flipH ? -1 : 1);
const finalY = localY * (layer.flipV ? -1 : 1);
ctx.beginPath();
ctx.arc(rotatedX, rotatedY, handleRadius, 0, Math.PI * 2);
ctx.arc(finalX, finalY, handleRadius, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
}

30
src/CanvasInteractions.ts
View File

@@ -857,8 +857,15 @@ export class CanvasInteractions {
// Rotate mouse delta into the layer's unrotated frame
const deltaX_world = mouseX_local - dragStartX_local;
const deltaY_world = mouseY_local - dragStartY_local;
const mouseDeltaX_local = deltaX_world * cos + deltaY_world * sin;
const mouseDeltaY_local = deltaY_world * cos - deltaX_world * sin;
let mouseDeltaX_local = deltaX_world * cos + deltaY_world * sin;
let mouseDeltaY_local = deltaY_world * cos - deltaX_world * sin;
if (layer.flipH) {
mouseDeltaX_local *= -1;
}
if (layer.flipV) {
mouseDeltaY_local *= -1;
}
// Convert the on-screen mouse delta to an image-space delta.
const screenToImageScaleX = o.originalWidth / o.width;
@@ -870,19 +877,34 @@ export class CanvasInteractions {
let newCropBounds = { ...o.cropBounds }; // Start with the bounds from the beginning of the drag
// Apply the image-space delta to the appropriate edges of the crop bounds
const isFlippedH = layer.flipH;
const isFlippedV = layer.flipV;
if (handle?.includes('w')) {
if (isFlippedH) newCropBounds.width += delta_image_x;
else {
newCropBounds.x += delta_image_x;
newCropBounds.width -= delta_image_x;
}
}
if (handle?.includes('e')) {
newCropBounds.width += delta_image_x;
if (isFlippedH) {
newCropBounds.x += delta_image_x;
newCropBounds.width -= delta_image_x;
} else newCropBounds.width += delta_image_x;
}
if (handle?.includes('n')) {
if (isFlippedV) newCropBounds.height += delta_image_y;
else {
newCropBounds.y += delta_image_y;
newCropBounds.height -= delta_image_y;
}
}
if (handle?.includes('s')) {
newCropBounds.height += delta_image_y;
if (isFlippedV) {
newCropBounds.y += delta_image_y;
newCropBounds.height -= delta_image_y;
} else newCropBounds.height += delta_image_y;
}
// Clamp crop bounds to stay within the original image and maintain minimum size

12
src/CanvasLayers.ts
View File

@@ -1188,9 +1188,17 @@ export class CanvasLayers {
const cropRectW = layer.cropBounds.width * layerScaleX;
const cropRectH = layer.cropBounds.height * layerScaleY;
// Effective crop bounds start position, accounting for flips.
const effectiveCropX = layer.flipH
? layer.originalWidth - (layer.cropBounds.x + layer.cropBounds.width)
: layer.cropBounds.x;
const effectiveCropY = layer.flipV
? layer.originalHeight - (layer.cropBounds.y + layer.cropBounds.height)
: layer.cropBounds.y;
// Center of the CROP rectangle in the layer's local, un-rotated space
const cropCenterX_local = (-layer.width / 2) + ((layer.cropBounds.x + layer.cropBounds.width / 2) * layerScaleX);
const cropCenterY_local = (-layer.height / 2) + ((layer.cropBounds.y + layer.cropBounds.height / 2) * layerScaleY);
const cropCenterX_local = (-layer.width / 2) + ((effectiveCropX + layer.cropBounds.width / 2) * layerScaleX);
const cropCenterY_local = (-layer.height / 2) + ((effectiveCropY + layer.cropBounds.height / 2) * layerScaleY);
// Rotate this local center to find the world-space center of the crop rect
handleCenterX = layerCenterX + (cropCenterX_local * cos - cropCenterY_local * sin);

30
src/CanvasRenderer.ts
View File

@@ -575,8 +575,10 @@ export class CanvasRenderer {
// Draw line to rotation handle
ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(0, -halfH);
ctx.lineTo(0, -halfH - 20 / this.canvas.viewport.zoom);
const startY = layer.flipV ? halfH : -halfH;
const endY = startY + (layer.flipV ? 1 : -1) * (20 / this.canvas.viewport.zoom);
ctx.moveTo(0, startY);
ctx.lineTo(0, endY);
ctx.stroke();
}
@@ -586,21 +588,33 @@ export class CanvasRenderer {
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1 / this.canvas.viewport.zoom;
const centerX = layer.x + layer.width / 2;
const centerY = layer.y + layer.height / 2;
for (const key in handles) {
// Skip rotation handle in crop mode
if (layer.cropMode && key === 'rot') continue;
const point = handles[key];
// The handle position is already in world space, we need it in the layer's rotated space
const localX = point.x - (layer.x + layer.width / 2);
const localY = point.y - (layer.y + layer.height / 2);
// The handle position is already in world space.
// We need to convert it to the layer's local, un-rotated space.
const dx = point.x - centerX;
const dy = point.y - centerY;
// "Un-rotate" the position to get it in the layer's local, un-rotated space
const rad = -layer.rotation * Math.PI / 180;
const rotatedX = localX * Math.cos(rad) - localY * Math.sin(rad);
const rotatedY = localX * Math.sin(rad) + localY * Math.cos(rad);
const cos = Math.cos(rad);
const sin = Math.sin(rad);
const localX = dx * cos - dy * sin;
const localY = dx * sin + dy * cos;
// The context is already flipped. We need to flip the coordinates
// to match the visual transformation, so the arc is drawn in the correct place.
const finalX = localX * (layer.flipH ? -1 : 1);
const finalY = localY * (layer.flipV ? -1 : 1);
ctx.beginPath();
ctx.arc(rotatedX, rotatedY, handleRadius, 0, Math.PI * 2);
ctx.arc(finalX, finalY, handleRadius, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
}