perf(ui): disable perfect draw for all shapes

This feature involves a certain amount of extra work to ensure stroke and fill with partial opacity render correctly together. However, none of our shapes actually use that combination of attributes, so we can disable this for a minor perf boost.

invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackgroundModule.ts

@@ -69,7 +69,7 @@ export class CanvasBackgroundModule extends CanvasModuleBase {
       layer: new Konva.Layer({ name: `${this.type}:layer`, listening: false, imageSmoothingEnabled: false }),
       linesGroup: new Konva.Group({ name: `${this.type}:linesGroup` }),
       lines: [],
-      patternRect: new Konva.Rect({ name: `${this.type}:patternRect` }),
+      patternRect: new Konva.Rect({ name: `${this.type}:patternRect`, perfectDrawEnabled: false }),
     };
 
     this.konva.layer.add(this.konva.patternRect);
@@ -174,6 +174,7 @@ export class CanvasBackgroundModule extends CanvasModuleBase {
         stroke: _x % 64 ? this.config.GRID_LINE_COLOR_FINE : this.config.GRID_LINE_COLOR_COARSE,
         strokeWidth,
         listening: false,
+        perfectDrawEnabled: false,
       });
       this.konva.lines.push(line);
       this.konva.linesGroup.add(line);
@@ -187,6 +188,7 @@ export class CanvasBackgroundModule extends CanvasModuleBase {
         stroke: _y % 64 ? this.config.GRID_LINE_COLOR_FINE : this.config.GRID_LINE_COLOR_COARSE,
         strokeWidth,
         listening: false,
+        perfectDrawEnabled: false,
       });
       this.konva.lines.push(line);
       this.konva.linesGroup.add(line);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasBboxModule.ts

@@ -83,6 +83,7 @@ export class CanvasBboxModule extends CanvasModuleBase {
         stroke: 'rgb(42,42,42)',
         strokeWidth: 1,
         strokeScaleEnabled: false,
+        perfectDrawEnabled: false,
       }),
       overlayGroup: new Konva.Group({
         name: `${this.type}:overlayGroup`,
@@ -123,6 +124,7 @@ export class CanvasBboxModule extends CanvasModuleBase {
         strokeEnabled: false,
         draggable: false,
         fill: 'hsl(220 12% 10% / 0.8)',
+        perfectDrawEnabled: false,
       }),
       transformer: new Konva.Transformer({
         name: `${this.type}:transformer`,

invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectBrushLine.ts

@@ -47,6 +47,7 @@ export class CanvasObjectBrushLine extends CanvasModuleBase {
         lineCap: 'round',
         lineJoin: 'round',
         globalCompositeOperation: 'source-over',
+        perfectDrawEnabled: false,
       }),
     };
     this.konva.group.add(this.konva.line);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectBrushLineWithPressure.ts

@@ -48,6 +48,7 @@ export class CanvasObjectBrushLineWithPressure extends CanvasModuleBase {
         listening: false,
         shadowForStrokeEnabled: false,
         globalCompositeOperation: 'source-over',
+        perfectDrawEnabled: false,
       }),
     };
     this.konva.group.add(this.konva.line);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectEraserLine.ts

@@ -46,6 +46,7 @@ export class CanvasObjectEraserLine extends CanvasModuleBase {
         lineCap: 'round',
         lineJoin: 'round',
         globalCompositeOperation: 'destination-out',
+        perfectDrawEnabled: false,
       }),
     };
     this.konva.group.add(this.konva.line);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectEraserLineWithPressure.ts

@@ -48,6 +48,7 @@ export class CanvasObjectEraserLineWithPressure extends CanvasModuleBase {
         fill: 'red', // Eraser lines use compositing, does not matter what color they have
         shadowForStrokeEnabled: false,
         globalCompositeOperation: 'destination-out',
+        perfectDrawEnabled: false,
       }),
     };
     this.konva.group.add(this.konva.line);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectImage.ts

@@ -65,6 +65,7 @@ export class CanvasObjectImage extends CanvasModuleBase {
           width,
           height,
           listening: false,
+          perfectDrawEnabled: false,
         }),
         text: new Konva.Text({
           name: `${this.type}:placeholder_text`,
@@ -78,6 +79,7 @@ export class CanvasObjectImage extends CanvasModuleBase {
           fontStyle: '600',
           text: t('common.loadingImage', 'Loading Image'),
           listening: false,
+          perfectDrawEnabled: false,
         }),
       },
       image: null,
@@ -144,6 +146,7 @@ export class CanvasObjectImage extends CanvasModuleBase {
             image: this.imageElement,
             width,
             height,
+            perfectDrawEnabled: false,
           });
           this.konva.group.add(this.konva.image);
         }

invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectRect.ts

@@ -35,7 +35,7 @@ export class CanvasObjectRect extends CanvasModuleBase {
 
     this.konva = {
       group: new Konva.Group({ name: `${this.type}:group`, listening: false }),
-      rect: new Konva.Rect({ name: `${this.type}:rect`, listening: false }),
+      rect: new Konva.Rect({ name: `${this.type}:rect`, listening: false, perfectDrawEnabled: false }),
     };
     this.konva.group.add(this.konva.rect);
     this.state = state;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts

@@ -140,6 +140,7 @@ export class CanvasProgressImageModule extends CanvasModuleBase {
           y,
           width,
           height,
+          perfectDrawEnabled: false,
         });
         this.konva.group.add(this.konva.image);
       }

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolBrush.ts

@@ -71,6 +71,7 @@ export class CanvasToolBrush extends CanvasModuleBase {
         name: `${this.type}:brush_fill_circle`,
         listening: false,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
       innerBorder: new Konva.Ring({
         name: `${this.type}:brush_inner_border_ring`,
@@ -79,6 +80,7 @@ export class CanvasToolBrush extends CanvasModuleBase {
         outerRadius: 0,
         fill: this.config.BORDER_INNER_COLOR,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
       outerBorder: new Konva.Ring({
         name: `${this.type}:brush_outer_border_ring`,
@@ -87,6 +89,7 @@ export class CanvasToolBrush extends CanvasModuleBase {
         outerRadius: 0,
         fill: this.config.BORDER_OUTER_COLOR,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
     };
     this.konva.group.add(this.konva.fillCircle, this.konva.innerBorder, this.konva.outerBorder);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolColorPicker.ts

@@ -114,6 +114,7 @@ export class CanvasToolColorPicker extends CanvasModuleBase {
         innerRadius: 0,
         outerRadius: 0,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
       ringCurrentColor: new Konva.Arc({
         name: `${this.type}:color_picker_current_color_arc`,
@@ -121,6 +122,7 @@ export class CanvasToolColorPicker extends CanvasModuleBase {
         outerRadius: 0,
         angle: 180,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
       ringInnerBorder: new Konva.Ring({
         name: `${this.type}:color_picker_inner_border_ring`,
@@ -128,6 +130,7 @@ export class CanvasToolColorPicker extends CanvasModuleBase {
         outerRadius: 0,
         fill: this.config.RING_BORDER_INNER_COLOR,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
       ringOuterBorder: new Konva.Ring({
         name: `${this.type}:color_picker_outer_border_ring`,
@@ -135,38 +138,47 @@ export class CanvasToolColorPicker extends CanvasModuleBase {
         outerRadius: 0,
         fill: this.config.RING_BORDER_OUTER_COLOR,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
       crosshairNorthInner: new Konva.Line({
         name: `${this.type}:color_picker_crosshair_north1_line`,
         stroke: this.config.CROSSHAIR_LINE_COLOR,
+        perfectDrawEnabled: false,
       }),
       crosshairNorthOuter: new Konva.Line({
         name: `${this.type}:color_picker_crosshair_north2_line`,
         stroke: this.config.CROSSHAIR_BORDER_COLOR,
+        perfectDrawEnabled: false,
       }),
       crosshairEastInner: new Konva.Line({
         name: `${this.type}:color_picker_crosshair_east1_line`,
         stroke: this.config.CROSSHAIR_LINE_COLOR,
+        perfectDrawEnabled: false,
       }),
       crosshairEastOuter: new Konva.Line({
         name: `${this.type}:color_picker_crosshair_east2_line`,
         stroke: this.config.CROSSHAIR_BORDER_COLOR,
+        perfectDrawEnabled: false,
       }),
       crosshairSouthInner: new Konva.Line({
         name: `${this.type}:color_picker_crosshair_south1_line`,
         stroke: this.config.CROSSHAIR_LINE_COLOR,
+        perfectDrawEnabled: false,
       }),
       crosshairSouthOuter: new Konva.Line({
         name: `${this.type}:color_picker_crosshair_south2_line`,
         stroke: this.config.CROSSHAIR_BORDER_COLOR,
+        perfectDrawEnabled: false,
       }),
       crosshairWestInner: new Konva.Line({
         name: `${this.type}:color_picker_crosshair_west1_line`,
         stroke: this.config.CROSSHAIR_LINE_COLOR,
+        perfectDrawEnabled: false,
       }),
       crosshairWestOuter: new Konva.Line({
         name: `${this.type}:color_picker_crosshair_west2_line`,
         stroke: this.config.CROSSHAIR_BORDER_COLOR,
+        perfectDrawEnabled: false,
       }),
     };
 

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolEraser.ts

@@ -57,6 +57,7 @@ export class CanvasToolEraser extends CanvasModuleBase {
         // The fill is used only to erase what is underneath it, so its color doesn't matter - just needs to be opaque
         fill: 'white',
         globalCompositeOperation: 'destination-out',
+        perfectDrawEnabled: false,
       }),
       innerBorder: new Konva.Ring({
         name: `${this.type}:eraser_inner_border_ring`,
@@ -65,6 +66,7 @@ export class CanvasToolEraser extends CanvasModuleBase {
         outerRadius: 0,
         fill: this.config.BORDER_INNER_COLOR,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
       outerBorder: new Konva.Ring({
         name: `${this.type}:eraser_outer_border_ring`,
@@ -72,6 +74,7 @@ export class CanvasToolEraser extends CanvasModuleBase {
         outerRadius: 0,
         fill: this.config.BORDER_OUTER_COLOR,
         strokeEnabled: false,
+        perfectDrawEnabled: false,
       }),
     };
     this.konva.group.add(this.konva.cutoutCircle, this.konva.innerBorder, this.konva.outerBorder);