Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): transform tool seems to be working

Browse Source
This commit is contained in:
psychedelicious 2024-07-19 13:20:29 +10:00
parent f405e472ea
commit 46b7c510eb
1 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
View File

@ -76,31 +76,31 @@ export class CanvasLayer {
this.konva.group.add(this.konva.interactionRect); this.konva.group.add(this.konva.interactionRect);
this.konva.group.add(this.konva.bbox); this.konva.group.add(this.konva.bbox);
this.konva.transformer.on('transform', () => { // this.konva.transformer.on('transform', () => {
console.log(this.konva.interactionRect.position()); // console.log(this.konva.interactionRect.position());
this.konva.objectGroup.setAttrs({ // this.konva.objectGroup.setAttrs({
scaleX: this.konva.interactionRect.scaleX(), // scaleX: this.konva.interactionRect.scaleX(),
scaleY: this.konva.interactionRect.scaleY(), // scaleY: this.konva.interactionRect.scaleY(),
// rotation: this.konva.interactionRect.rotation(), // // rotation: this.konva.interactionRect.rotation(),
x: this.konva.interactionRect.x(), // x: this.konva.interactionRect.x(),
t: this.konva.interactionRect.y(), // t: this.konva.interactionRect.y(),
}); // });
}); // });
this.konva.transformer.on('transformend', () => { this.konva.transformer.on('transformend', () => {
console.log(this.bbox); console.log(this.bbox);
this.bbox = { this.bbox = {
x: this.konva.interactionRect.x(), x: this.bbox.x * this.konva.group.scaleX(),
y: this.konva.interactionRect.y(), y: this.bbox.y * this.konva.group.scaleY(),
width: this.konva.interactionRect.width() * this.konva.interactionRect.scaleX(), width: this.bbox.width * this.konva.group.scaleX(),
height: this.konva.interactionRect.height() * this.konva.interactionRect.scaleY(), height: this.bbox.height * this.konva.group.scaleY(),
}; };
console.log(this.bbox); console.log(this.bbox);
this.renderBbox(); this.renderBbox();
this.manager.stateApi.onScaleChanged( this.manager.stateApi.onScaleChanged(
{ {
id: this.id, id: this.id,
scale: this.konva.objectGroup.scaleX(), scale: this.konva.group.scaleX(),
position: { x: this.konva.objectGroup.x(), y: this.konva.objectGroup.y() }, position: { x: this.konva.group.x(), y: this.konva.group.y() },
}, },
'layer' 'layer'
); );
@ -297,8 +297,7 @@ export class CanvasLayer {
// this.konva.objectGroup.cache(); // this.konva.objectGroup.cache();
} }
// Activate the transformer // Activate the transformer
this.konva.transformer.nodes([this.konva.interactionRect]); this.konva.transformer.nodes([this.konva.group]);
this.konva.transformer.enabledAnchors(['top-left', 'top-right', 'bottom-left', 'bottom-right']);
this.konva.transformer.forceUpdate(); this.konva.transformer.forceUpdate();
this.konva.transformer.visible(true); this.konva.transformer.visible(true);
} else if (selectedTool === 'move') { } else if (selectedTool === 'move') {
@ -308,8 +307,7 @@ export class CanvasLayer {
// this.konva.objectGroup.cache(); // this.konva.objectGroup.cache();
} }
// Activate the transformer // Activate the transformer
this.konva.transformer.nodes([this.konva.interactionRect]); this.konva.transformer.nodes([]);
this.konva.transformer.enabledAnchors([]);
this.konva.transformer.forceUpdate(); this.konva.transformer.forceUpdate();
this.konva.transformer.visible(false); this.konva.transformer.visible(false);
} else if (isSelected) { } else if (isSelected) {