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

Transform in group

Browse Source
This commit is contained in:
Dariusz L
2025-06-21 00:43:07 +02:00
parent d9ac5546dd
commit 797666e2a3
1 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
js/Canvas.js
View File

@@ -29,6 +29,7 @@ export class Canvas {
isAltPressed: false,
hasClonedInDrag: false,
lastClickTime: 0,
transformingLayer: null,
};
this.originalLayerPositions = new Map();
this.interaction.canvasResizeRect = null;
@@ -121,6 +122,7 @@ export class Canvas {
this.interaction.canvasResizeRect = null;
this.interaction.canvasMoveRect = null;
this.interaction.hasClonedInDrag = false;
this.interaction.transformingLayer = null;
this.canvas.style.cursor = 'default';
}
@@ -145,9 +147,9 @@ export class Canvas {
}
this.interaction.lastClickTime = currentTime;
const handle = this.getHandleAtPosition(worldCoords.x, worldCoords.y);
if (this.selectedLayer && handle) {
this.startLayerTransform(handle, worldCoords);
const transformTarget = this.getHandleAtPosition(worldCoords.x, worldCoords.y);
if (transformTarget) {
this.startLayerTransform(transformTarget.layer, transformTarget.handle, worldCoords);
return;
}
@@ -481,14 +483,16 @@ export class Canvas {
}
updateCursor(worldCoords) {
const handle = this.getHandleAtPosition(worldCoords.x, worldCoords.y);
if (handle) {
const transformTarget = this.getHandleAtPosition(worldCoords.x, worldCoords.y);
if (transformTarget) {
const handleName = transformTarget.handle; // Wyciągamy nazwę uchwytu z obiektu
const cursorMap = {
'n': 'ns-resize', 's': 'ns-resize', 'e': 'ew-resize', 'w': 'ew-resize',
'nw': 'nwse-resize', 'se': 'nwse-resize', 'ne': 'nesw-resize', 'sw': 'nesw-resize',
'rot': 'grab'
};
this.canvas.style.cursor = cursorMap[handle];
this.canvas.style.cursor = cursorMap[handleName]; // Używamy nazwy jako klucza
} else if (this.getLayerAtPosition(worldCoords.x, worldCoords.y)) {
this.canvas.style.cursor = 'move';
} else {
@@ -496,8 +500,8 @@ export class Canvas {
}
}
startLayerTransform(handle, worldCoords) {
const layer = this.selectedLayer;
startLayerTransform(layer, handle, worldCoords) {
this.interaction.transformingLayer = layer;
this.interaction.transformOrigin = {
x: layer.x, y: layer.y,
width: layer.width, height: layer.height,
@@ -675,6 +679,9 @@ export class Canvas {
}
resizeLayerFromHandle(worldCoords, isShiftPressed) {
const layer = this.interaction.transformingLayer;
if (!layer) return;
let mouseX = worldCoords.x;
let mouseY = worldCoords.y;
@@ -686,7 +693,6 @@ export class Canvas {
if (Math.abs(mouseY - snappedMouseY) < snapThreshold) mouseY = snappedMouseY;
}
const layer = this.selectedLayer;
const o = this.interaction.transformOrigin;
const handle = this.interaction.resizeHandle;
const anchor = this.interaction.resizeAnchor;
@@ -756,7 +762,11 @@ export class Canvas {
this.render();
}
rotateLayerFromHandle(worldCoords, isShiftPressed) {
const layer = this.interaction.transformingLayer;
if (!layer) return;
const o = this.interaction.transformOrigin;
const startAngle = Math.atan2(this.interaction.dragStart.y - o.centerY, this.interaction.dragStart.x - o.centerX);
const currentAngle = Math.atan2(worldCoords.y - o.centerY, worldCoords.x - o.centerX);
@@ -767,7 +777,7 @@ export class Canvas {
newRotation = Math.round(newRotation / 15) * 15;
}
this.selectedLayer.rotation = newRotation;
layer.rotation = newRotation;
this.render();
}
@@ -1249,17 +1259,20 @@ export class Canvas {
}
getHandleAtPosition(worldX, worldY) {
if (!this.selectedLayer) return null;
if (this.selectedLayers.length === 0) return null;
const handles = this.getHandles(this.selectedLayer);
const handleRadius = 8 / this.viewport.zoom;
for (let i = this.selectedLayers.length - 1; i >= 0; i--) {
const layer = this.selectedLayers[i];
const handles = this.getHandles(layer);
for (const key in handles) {
const handlePos = handles[key];
const dx = worldX - handlePos.x;
const dy = worldY - handlePos.y;
if (dx * dx + dy * dy <= handleRadius * handleRadius) {
return key;
for (const key in handles) {
const handlePos = handles[key];
const dx = worldX - handlePos.x;
const dy = worldY - handlePos.y;
if (dx * dx + dy * dy <= handleRadius * handleRadius) {
return {layer: layer, handle: key};
}
}
}
return null;