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

tidy(ui): move transformer statics into class

Browse Source
This commit is contained in:
psychedelicious 2024-08-07 08:06:22 +10:00
parent 894b8a29b9
commit 3c86f1e979
2 changed files with 24 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
View File

@ -108,9 +108,6 @@ type EntityStateAndAdapter =
export const $canvasManager = atom<CanvasManager | null>(null); export const $canvasManager = atom<CanvasManager | null>(null);
export class CanvasManager { export class CanvasManager {
static BBOX_PADDING_PX = 5;
static BBOX_DEBOUNCE_MS = 300;
stage: Konva.Stage; stage: Konva.Stage;
container: HTMLDivElement; container: HTMLDivElement;
controlAdapters: Map<string, CanvasControlAdapter>; controlAdapters: Map<string, CanvasControlAdapter>;
@ -619,16 +616,8 @@ export class CanvasManager {
return this.stage.position(); return this.stage.position();
} }
getScaledPixel(): number { getScaledPixels(pixels: number): number {
return 1 / this.getStageScale(); return pixels / this.getStageScale();
}
getScaledBboxPadding(): number {
return CanvasManager.BBOX_PADDING_PX / this.getStageScale();
}
getTransformerPadding(): number {
return CanvasManager.BBOX_PADDING_PX;
} }
getGenerationMode(): GenerationMode { getGenerationMode(): GenerationMode {

39
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
View File

@ -1,5 +1,5 @@
import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter'; import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter';
import { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter'; import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter';
import { getEmptyRect, getPrefixedId } from 'features/controlLayers/konva/util'; import { getEmptyRect, getPrefixedId } from 'features/controlLayers/konva/util';
import type { Coordinate, GetLoggingContext, Rect } from 'features/controlLayers/store/types'; import type { Coordinate, GetLoggingContext, Rect } from 'features/controlLayers/store/types';
@ -21,17 +21,22 @@ export class CanvasTransformer {
static KONVA_PROXY_RECT_NAME = `${CanvasTransformer.TYPE}:proxy_rect`; static KONVA_PROXY_RECT_NAME = `${CanvasTransformer.TYPE}:proxy_rect`;
static KONVA_OUTLINE_RECT_NAME = `${CanvasTransformer.TYPE}:outline_rect`; static KONVA_OUTLINE_RECT_NAME = `${CanvasTransformer.TYPE}:outline_rect`;
static STROKE_COLOR = 'hsl(200 76% 50% / 1)'; // invokeBlue.500 static RECT_CALC_DEBOUNCE_MS = 300;
static ANCHOR_FILL_COLOR = CanvasTransformer.STROKE_COLOR; static OUTLINE_PADDING = 5;
static OUTLINE_COLOR = 'hsl(200 76% 50% / 1)'; // invokeBlue.500
static ANCHOR_FILL_COLOR = CanvasTransformer.OUTLINE_COLOR;
static ANCHOR_STROKE_COLOR = 'hsl(200 76% 77% / 1)'; // invokeBlue.200 static ANCHOR_STROKE_COLOR = 'hsl(200 76% 77% / 1)'; // invokeBlue.200
static RESIZE_ANCHOR_SIZE = 8;
static ROTATE_ANCHOR_FILL_COLOR = 'hsl(200 76% 95% / 1)'; // invokeBlue.50
static ROTATE_ANCHOR_STROKE_COLOR = 'hsl(200 76% 40% / 1)'; // invokeBlue.700
static ROTATE_ANCHOR_SIZE = 12;
static ANCHOR_CORNER_RADIUS_RATIO = 0.5; static ANCHOR_CORNER_RADIUS_RATIO = 0.5;
static ANCHOR_STROKE_WIDTH = 2; static ANCHOR_STROKE_WIDTH = 2;
static ANCHOR_HIT_PADDING = 10; static ANCHOR_HIT_PADDING = 10;
static RESIZE_ANCHOR_SIZE = 8;
static ROTATE_ANCHOR_FILL_COLOR = 'hsl(200 76% 95% / 1)'; // invokeBlue.50
static ROTATE_ANCHOR_STROKE_COLOR = 'hsl(200 76% 40% / 1)'; // invokeBlue.700
static ROTATE_ANCHOR_SIZE = 12;
id: string; id: string;
parent: CanvasLayerAdapter | CanvasMaskAdapter; parent: CanvasLayerAdapter | CanvasMaskAdapter;
manager: CanvasManager; manager: CanvasManager;
@ -104,7 +109,7 @@ export class CanvasTransformer {
listening: false, listening: false,
draggable: false, draggable: false,
name: CanvasTransformer.KONVA_OUTLINE_RECT_NAME, name: CanvasTransformer.KONVA_OUTLINE_RECT_NAME,
stroke: CanvasTransformer.STROKE_COLOR, stroke: CanvasTransformer.OUTLINE_COLOR,
perfectDrawEnabled: false, perfectDrawEnabled: false,
strokeHitEnabled: false, strokeHitEnabled: false,
}), }),
@ -120,9 +125,9 @@ export class CanvasTransformer {
// Transforming will retain aspect ratio only when shift is held // Transforming will retain aspect ratio only when shift is held
keepRatio: false, keepRatio: false,
// The padding is the distance between the transformer bbox and the nodes // The padding is the distance between the transformer bbox and the nodes
padding: this.manager.getTransformerPadding(), padding: CanvasTransformer.OUTLINE_PADDING,
// This is `invokeBlue.400` // This is `invokeBlue.400`
stroke: CanvasTransformer.STROKE_COLOR, stroke: CanvasTransformer.OUTLINE_COLOR,
anchorFill: CanvasTransformer.ANCHOR_FILL_COLOR, anchorFill: CanvasTransformer.ANCHOR_FILL_COLOR,
anchorStroke: CanvasTransformer.ANCHOR_STROKE_COLOR, anchorStroke: CanvasTransformer.ANCHOR_STROKE_COLOR,
anchorStrokeWidth: CanvasTransformer.ANCHOR_STROKE_WIDTH, anchorStrokeWidth: CanvasTransformer.ANCHOR_STROKE_WIDTH,
@ -332,8 +337,8 @@ export class CanvasTransformer {
// The bbox should be updated to reflect the new position of the interaction rect, taking into account its padding // The bbox should be updated to reflect the new position of the interaction rect, taking into account its padding
// and border // and border
this.konva.outlineRect.setAttrs({ this.konva.outlineRect.setAttrs({
x: this.konva.proxyRect.x() - this.manager.getScaledBboxPadding(), x: this.konva.proxyRect.x() - this.manager.getScaledPixels(CanvasTransformer.OUTLINE_PADDING),
y: this.konva.proxyRect.y() - this.manager.getScaledBboxPadding(), y: this.konva.proxyRect.y() - this.manager.getScaledPixels(CanvasTransformer.OUTLINE_PADDING),
}); });
// The object group is translated by the difference between the interaction rect's new and old positions (which is // The object group is translated by the difference between the interaction rect's new and old positions (which is
@ -404,8 +409,8 @@ export class CanvasTransformer {
* @param bbox The bounding box of the parent entity * @param bbox The bounding box of the parent entity
*/ */
update = (position: Coordinate, bbox: Rect) => { update = (position: Coordinate, bbox: Rect) => {
const onePixel = this.manager.getScaledPixel(); const onePixel = this.manager.getScaledPixels(1);
const bboxPadding = this.manager.getScaledBboxPadding(); const bboxPadding = this.manager.getScaledPixels(CanvasTransformer.OUTLINE_PADDING);
this.konva.outlineRect.setAttrs({ this.konva.outlineRect.setAttrs({
x: position.x + bbox.x - bboxPadding, x: position.x + bbox.x - bboxPadding,
@ -471,8 +476,8 @@ export class CanvasTransformer {
* Updates the transformer's scale. This is called when the stage is scaled. * Updates the transformer's scale. This is called when the stage is scaled.
*/ */
syncScale = () => { syncScale = () => {
const onePixel = this.manager.getScaledPixel(); const onePixel = this.manager.getScaledPixels(1);
const bboxPadding = this.manager.getScaledBboxPadding(); const bboxPadding = this.manager.getScaledPixels(CanvasTransformer.OUTLINE_PADDING);
this.konva.outlineRect.setAttrs({ this.konva.outlineRect.setAttrs({
x: this.konva.proxyRect.x() - bboxPadding, x: this.konva.proxyRect.x() - bboxPadding,
@ -672,7 +677,7 @@ export class CanvasTransformer {
clone.destroy(); clone.destroy();
} }
); );
}, CanvasManager.BBOX_DEBOUNCE_MS); }, CanvasTransformer.RECT_CALC_DEBOUNCE_MS);
requestRectCalculation = () => { requestRectCalculation = () => {
this.isPendingRectCalculation = true; this.isPendingRectCalculation = true;