fix(ui): control adapter translate & scale

This commit is contained in:
psychedelicious 2024-07-05 17:36:34 +10:00
parent a18878474b
commit 0f66753aa1
3 changed files with 37 additions and 2 deletions

View File

@ -43,11 +43,11 @@ export class CanvasControlAdapter {
this.transformer.on('transformend', () => {
this.manager.stateApi.onScaleChanged(
{ id: this.id, scale: this.group.scaleX(), x: this.group.x(), y: this.group.y() },
'layer'
'control_adapter'
);
});
this.transformer.on('dragend', () => {
this.manager.stateApi.onPosChanged({ id: this.id, x: this.group.x(), y: this.group.y() }, 'layer');
this.manager.stateApi.onPosChanged({ id: this.id, x: this.group.x(), y: this.group.y() }, 'control_adapter');
});
this.layer.add(this.transformer);
@ -57,6 +57,15 @@ export class CanvasControlAdapter {
async render(controlAdapterState: ControlAdapterEntity) {
this.controlAdapterState = controlAdapterState;
// Update the layer's position and listening state
this.group.setAttrs({
x: controlAdapterState.x,
y: controlAdapterState.y,
scaleX: 1,
scaleY: 1,
});
const imageObject = controlAdapterState.processedImageObject ?? controlAdapterState.imageObject;
let didDraw = false;

View File

@ -249,6 +249,7 @@ export class CanvasManager {
if (
this.isFirstRender ||
state.controlAdapters.entities !== this.prevState.controlAdapters.entities ||
state.tool.selected !== this.prevState.tool.selected ||
state.selectedEntityIdentifier?.id !== this.prevState.selectedEntityIdentifier?.id
) {
log.debug('Rendering control adapters');

View File

@ -15,6 +15,7 @@ import type {
ControlNetData,
Filter,
ProcessorConfig,
ScaleChangedArg,
T2IAdapterConfig,
T2IAdapterData,
} from './types';
@ -72,6 +73,30 @@ export const controlAdaptersReducers = {
ca.x = x;
ca.y = y;
},
caScaled: (state, action: PayloadAction<ScaleChangedArg>) => {
const { id, scale, x, y } = action.payload;
const ca = selectCA(state, id);
if (!ca) {
return;
}
if (ca.imageObject) {
ca.imageObject.x *= scale;
ca.imageObject.y *= scale;
ca.imageObject.height *= scale;
ca.imageObject.width *= scale;
}
if (ca.processedImageObject) {
ca.processedImageObject.x *= scale;
ca.processedImageObject.y *= scale;
ca.processedImageObject.height *= scale;
ca.processedImageObject.width *= scale;
}
ca.x = x;
ca.y = y;
ca.bboxNeedsUpdate = true;
state.layers.imageCache = null;
},
caBboxChanged: (state, action: PayloadAction<{ id: string; bbox: IRect | null }>) => {
const { id, bbox } = action.payload;
const ca = selectCA(state, id);