github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): make rendering methods not need args

Browse Source 
They should pull from the entity's state directly. This allows more freedom with updating the canvas.
This commit is contained in:
psychedelicious
2024-09-04 19:29:36 +10:00
parent ba54a05efd
commit b201541cb0
7 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/controlLayers/konva/CanvasControlLayerAdapter.ts
View File

@@ -44,7 +44,7 @@ export class CanvasControlLayerAdapter extends CanvasEntityAdapterBase<CanvasCon
this.transformer.syncInteractionState();
}
if (!prevState || state.objects !== prevState.objects) {
const didRender = await this.renderer.render(this.state.objects);
const didRender = await this.renderer.render();
if (didRender) {
this.transformer.requestRectCalculation();
}
@@ -53,10 +53,10 @@ export class CanvasControlLayerAdapter extends CanvasEntityAdapterBase<CanvasCon
this.transformer.updatePosition();
}
if (!prevState || state.opacity !== prevState.opacity) {
this.renderer.updateOpacity(state.opacity);
this.renderer.updateOpacity();
}
if (!prevState || state.withTransparencyEffect !== prevState.withTransparencyEffect) {
this.renderer.updateTransparencyEffect(state.withTransparencyEffect);
this.renderer.updateTransparencyEffect();
}
if (!prevState) {

33
invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityObjectRenderer.ts
View File

@@ -46,11 +46,7 @@ function setFillPatternImage(shape: Konva.Shape, ...args: Parameters<typeof getP
/**
* Union of all object renderers.
*/
type AnyObjectRenderer =
| CanvasObjectBrushLine
| CanvasObjectEraserLine
| CanvasObjectRect
| CanvasObjectImage;
type AnyObjectRenderer = CanvasObjectBrushLine | CanvasObjectEraserLine | CanvasObjectRect | CanvasObjectImage;
/**
* Union of all object states.
*/
@@ -193,14 +189,14 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
}
/**
* Renders the given objects.
* @param objectStates The objects to render.
* Renders the entity's objects.
* @returns A promise that resolves to a boolean, indicating if any of the objects were rendered.
*/
render = async (objectStates: AnyObjectState[]): Promise<boolean> => {
render = async (): Promise<boolean> => {
let didRender = false;
const objectIds = objectStates.map((objectState) => objectState.id);
const objects = this.parent.state.objects;
const objectIds = objects.map((obj) => obj.id);
for (const renderer of this.renderers.values()) {
if (!objectIds.includes(renderer.id)) {
@@ -210,8 +206,8 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
}
}
for (const objectState of objectStates) {
didRender = (await this.renderObject(objectState)) || didRender;
for (const obj of objects) {
didRender = (await this.renderObject(obj)) || didRender;
}
this.syncCache(didRender);
@@ -231,9 +227,11 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
}
};
updateTransparencyEffect = (withTransparencyEffect: boolean) => {
const filters = withTransparencyEffect ? [LightnessToAlphaFilter] : [];
this.konva.objectGroup.filters(filters);
updateTransparencyEffect = () => {
if (this.parent.state.type === 'control_layer') {
const filters = this.parent.state.withTransparencyEffect ? [LightnessToAlphaFilter] : [];
this.konva.objectGroup.filters(filters);
}
};
updateCompositingRectFill = (fill: Fill) => {
@@ -269,8 +267,13 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
});
};
updateOpacity = (opacity: number) => {
updateOpacity = () => {
this.log.trace('Updating opacity');
const opacity = this.manager.stateApi.getIsTypeHidden(this.parent.entityIdentifier.type)
? 0
: this.parent.state.opacity;
if (this.konva.compositing) {
this.konva.compositing.group.opacity(opacity);
} else {

4
invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMaskAdapter.ts
View File

@@ -46,7 +46,7 @@ export class CanvasInpaintMaskAdapter extends CanvasEntityAdapterBase<CanvasInpa
this.renderer.syncCache(state.isEnabled);
}
if (!prevState || state.objects !== prevState.objects) {
const didRender = await this.renderer.render(this.state.objects);
const didRender = await this.renderer.render();
if (didRender) {
this.transformer.requestRectCalculation();
}
@@ -55,7 +55,7 @@ export class CanvasInpaintMaskAdapter extends CanvasEntityAdapterBase<CanvasInpa
this.transformer.updatePosition();
}
if (!prevState || state.opacity !== prevState.opacity) {
this.renderer.updateOpacity(state.opacity);
this.renderer.updateOpacity();
}
if (!prevState || state.isLocked !== prevState.isLocked) {
this.transformer.syncInteractionState();

4
invokeai/frontend/web/src/features/controlLayers/konva/CanvasRasterLayerAdapter.ts
View File

@@ -47,7 +47,7 @@ export class CanvasRasterLayerAdapter extends CanvasEntityAdapterBase<CanvasRast
this.transformer.syncInteractionState();
}
if (!prevState || state.objects !== prevState.objects) {
const didRender = await this.renderer.render(this.state.objects);
const didRender = await this.renderer.render();
if (didRender) {
this.transformer.requestRectCalculation();
}
@@ -56,7 +56,7 @@ export class CanvasRasterLayerAdapter extends CanvasEntityAdapterBase<CanvasRast
this.transformer.updatePosition();
}
if (!prevState || state.opacity !== prevState.opacity) {
this.renderer.updateOpacity(state.opacity);
this.renderer.updateOpacity();
}
if (!prevState) {
// First render

4
invokeai/frontend/web/src/features/controlLayers/konva/CanvasRegionalGuidanceAdapter.ts
View File

@@ -45,7 +45,7 @@ export class CanvasRegionalGuidanceAdapter extends CanvasEntityAdapterBase<Canva
this.renderer.syncCache(state.isEnabled);
}
if (!prevState || state.objects !== prevState.objects) {
const didRender = await this.renderer.render(this.state.objects);
const didRender = await this.renderer.render();
if (didRender) {
this.transformer.requestRectCalculation();
}
@@ -54,7 +54,7 @@ export class CanvasRegionalGuidanceAdapter extends CanvasEntityAdapterBase<Canva
this.transformer.updatePosition();
}
if (!prevState || state.opacity !== prevState.opacity) {
this.renderer.updateOpacity(state.opacity);
this.renderer.updateOpacity();
}
if (!prevState || state.isLocked !== prevState.isLocked) {
this.transformer.syncInteractionState();

8
invokeai/frontend/web/src/features/controlLayers/konva/CanvasRenderingModule.ts
View File

@@ -123,7 +123,7 @@ export class CanvasRenderingModule extends CanvasModuleBase {
if (!prevState || state.rasterLayers.isHidden !== prevState.rasterLayers.isHidden) {
for (const adapter of adapterMap.values()) {
adapter.renderer.updateOpacity(state.rasterLayers.isHidden ? 0 : adapter.state.opacity);
adapter.renderer.updateOpacity();
}
}
@@ -152,7 +152,7 @@ export class CanvasRenderingModule extends CanvasModuleBase {
if (!prevState || state.controlLayers.isHidden !== prevState.controlLayers.isHidden) {
for (const adapter of adapterMap.values()) {
adapter.renderer.updateOpacity(state.controlLayers.isHidden ? 0 : adapter.state.opacity);
adapter.renderer.updateOpacity();
}
}
@@ -181,7 +181,7 @@ export class CanvasRenderingModule extends CanvasModuleBase {
if (!prevState || state.regions.isHidden !== prevState.regions.isHidden) {
for (const adapter of adapterMap.values()) {
adapter.renderer.updateOpacity(state.regions.isHidden ? 0 : adapter.state.opacity);
adapter.renderer.updateOpacity();
}
}
@@ -215,7 +215,7 @@ export class CanvasRenderingModule extends CanvasModuleBase {
if (!prevState || state.inpaintMasks.isHidden !== prevState.inpaintMasks.isHidden) {
for (const adapter of adapterMap.values()) {
adapter.renderer.updateOpacity(state.inpaintMasks.isHidden ? 0 : adapter.state.opacity);
adapter.renderer.updateOpacity();
}
}

20
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts
View File

@@ -27,6 +27,7 @@ import { selectAllRenderableEntities, selectCanvasSlice } from 'features/control
import type {
CanvasControlLayerState,
CanvasEntityIdentifier,
CanvasEntityType,
CanvasInpaintMaskState,
CanvasRasterLayerState,
CanvasRegionalGuidanceState,
@@ -46,6 +47,7 @@ import type { Logger } from 'roarr';
import { queueApi } from 'services/api/endpoints/queue';
import type { BatchConfig } from 'services/api/types';
import { $lastCanvasProgressEvent } from 'services/events/setEventListeners';
import { assert } from 'tsafe';
type EntityStateAndAdapter =
| {
@@ -245,6 +247,24 @@ export class CanvasStateApiModule extends CanvasModuleBase {
return this.getCanvasState().selectedEntityIdentifier?.id === id;
};
/**
* Checks if an entity type is hidden. Individual entities are not hidden; the entire entity type is hidden.
*/
getIsTypeHidden = (type: CanvasEntityType): boolean => {
switch (type) {
case 'raster_layer':
return this.getRasterLayersState().isHidden;
case 'control_layer':
return this.getControlLayersState().isHidden;
case 'inpaint_mask':
return this.getInpaintMasksState().isHidden;
case 'regional_guidance':
return this.getRegionsState().isHidden;
default:
assert(false, 'Unhandled entity type');
}
};
/**
* Gets an entity by its identifier. The entity's state is retrieved from the redux store, and its adapter is
* retrieved from the canvas manager.