github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-02 20:55:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): do not floor stage coords, add util to sync stage attrs

Browse Source
This commit is contained in:
psychedelicious
2024-09-14 19:12:09 +10:00
parent 25964bed18
commit cd2f9b1884
1 changed files with 16 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts
View File

@@ -129,13 +129,7 @@ export class CanvasStageModule extends CanvasModuleBase {
this.konva.stage.width(containerWidth);
this.konva.stage.height(containerHeight);
this.$stageAttrs.set({
x: this.konva.stage.x(),
y: this.konva.stage.y(),
width: this.konva.stage.width(),
height: this.konva.stage.height(),
scale: this.konva.stage.scaleX(),
});
this.syncStageAttrs();
if (shouldFitLayersAfterFittingStage) {
this.fitLayersToStage();
@@ -215,12 +209,7 @@ export class CanvasStageModule extends CanvasModuleBase {
scaleY: scale,
});
this.$stageAttrs.set({
...this.$stageAttrs.get(),
x,
y,
scale,
});
this.syncStageAttrs({ x, y, scale });
};
/**
@@ -276,13 +265,7 @@ export class CanvasStageModule extends CanvasModuleBase {
scaleY: newScale,
});
this.$stageAttrs.set({
x: Math.floor(this.konva.stage.x()),
y: Math.floor(this.konva.stage.y()),
width: this.konva.stage.width(),
height: this.konva.stage.height(),
scale: this.konva.stage.scaleX(),
});
this.syncStageAttrs();
};
onStageMouseWheel = (e: KonvaEventObject<WheelEvent>) => {
@@ -308,14 +291,7 @@ export class CanvasStageModule extends CanvasModuleBase {
return;
}
this.$stageAttrs.set({
// Stage position should always be an integer, else we get fractional pixels which are blurry
x: Math.floor(this.konva.stage.x()),
y: Math.floor(this.konva.stage.y()),
width: this.konva.stage.width(),
height: this.konva.stage.height(),
scale: this.konva.stage.scaleX(),
});
this.syncStageAttrs();
};
onStageDragEnd = (e: KonvaEventObject<DragEvent>) => {
@@ -323,14 +299,7 @@ export class CanvasStageModule extends CanvasModuleBase {
return;
}
this.$stageAttrs.set({
// Stage position should always be an integer, else we get fractional pixels which are blurry
x: Math.floor(this.konva.stage.x()),
y: Math.floor(this.konva.stage.y()),
width: this.konva.stage.width(),
height: this.konva.stage.height(),
scale: this.konva.stage.scaleX(),
});
this.syncStageAttrs();
};
/**
@@ -370,6 +339,17 @@ export class CanvasStageModule extends CanvasModuleBase {
this.container.style.cursor = cursor;
};
syncStageAttrs = (overrides?: Partial<StageAttrs>) => {
this.$stageAttrs.set({
x: this.konva.stage.x(),
y: this.konva.stage.y(),
width: this.konva.stage.width(),
height: this.konva.stage.height(),
scale: this.konva.stage.scaleX(),
...overrides,
});
};
setIsDraggable = (isDraggable: boolean) => {
this.konva.stage.draggable(isDraggable);
};