feat(ui): add names to all konva objects

Makes troubleshooting much simpler

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

@@ -30,12 +30,15 @@ const getGridSpacing = (scale: number): number => {
 };
 
 export class CanvasBackground {
+  static BASE_NAME = 'background';
+  static LAYER_NAME = `${CanvasBackground.BASE_NAME}_layer`;
+
   layer: Konva.Layer;
   manager: CanvasManager;
 
   constructor(manager: CanvasManager) {
     this.manager = manager;
-    this.layer = new Konva.Layer({ listening: false });
+    this.layer = new Konva.Layer({ name: CanvasBackground.LAYER_NAME, listening: false });
   }
 
   render() {

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

@@ -6,6 +6,11 @@ import { atom } from 'nanostores';
 import { assert } from 'tsafe';
 
 export class CanvasBbox {
+  static BASE_NAME = 'bbox';
+  static GROUP_NAME = `${CanvasBbox.BASE_NAME}_group`;
+  static RECT_NAME = `${CanvasBbox.BASE_NAME}_rect`;
+  static TRANSFORMER_NAME = `${CanvasBbox.BASE_NAME}_transformer`;
+
   group: Konva.Group;
   rect: Konva.Rect;
   transformer: Konva.Transformer;
@@ -33,8 +38,9 @@ export class CanvasBbox {
 
     // Use a transformer for the generation bbox. Transformers need some shape to transform, we will use a fully
     // transparent rect for this purpose.
-    this.group = new Konva.Group({ id: 'bbox_group', listening: false });
+    this.group = new Konva.Group({ name: CanvasBbox.GROUP_NAME, listening: false });
     this.rect = new Konva.Rect({
+      name: CanvasBbox.RECT_NAME,
       listening: false,
       strokeEnabled: false,
       draggable: true,
@@ -55,6 +61,7 @@ export class CanvasBbox {
     });
 
     this.transformer = new Konva.Transformer({
+      name: CanvasBbox.TRANSFORMER_NAME,
       borderDash: [5, 5],
       borderStroke: 'rgba(212,216,234,1)',
       borderEnabled: true,

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

@@ -3,6 +3,10 @@ import type { BrushLine } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 
 export class CanvasBrushLine {
+  static NAME_PREFIX = 'brush-line';
+  static GROUP_NAME = `${CanvasBrushLine.NAME_PREFIX}_group`;
+  static LINE_NAME = `${CanvasBrushLine.NAME_PREFIX}_line`;
+
   id: string;
   konvaLineGroup: Konva.Group;
   konvaLine: Konva.Line;
@@ -12,10 +16,12 @@ export class CanvasBrushLine {
     const { id, strokeWidth, clip, color, points } = brushLine;
     this.id = id;
     this.konvaLineGroup = new Konva.Group({
+      name: CanvasBrushLine.GROUP_NAME,
       clip,
       listening: false,
     });
     this.konvaLine = new Konva.Line({
+      name: CanvasBrushLine.LINE_NAME,
       id,
       listening: false,
       shadowForStrokeEnabled: false,

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

@@ -1,11 +1,17 @@
 import { CanvasImage } from 'features/controlLayers/konva/CanvasImage';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { getObjectGroupId } from 'features/controlLayers/konva/naming';
 import { type ControlAdapterEntity, isDrawingTool } from 'features/controlLayers/store/types';
 import Konva from 'konva';
-import { v4 as uuidv4 } from 'uuid';
 
 export class CanvasControlAdapter {
+  static NAME_PREFIX = 'control-adapter';
+  static LAYER_NAME = `${CanvasControlAdapter.NAME_PREFIX}_layer`;
+  static TRANSFORMER_NAME = `${CanvasControlAdapter.NAME_PREFIX}_transformer`;
+  static GROUP_NAME = `${CanvasControlAdapter.NAME_PREFIX}_group`;
+  static OBJECT_GROUP_NAME = `${CanvasControlAdapter.NAME_PREFIX}_object-group`;
+
+  private controlAdapterState: ControlAdapterEntity;
+
   id: string;
   manager: CanvasManager;
   layer: Konva.Layer;
@@ -13,26 +19,26 @@ export class CanvasControlAdapter {
   objectsGroup: Konva.Group;
   image: CanvasImage | null;
   transformer: Konva.Transformer;
-  private controlAdapterState: ControlAdapterEntity;
 
   constructor(controlAdapterState: ControlAdapterEntity, manager: CanvasManager) {
     const { id } = controlAdapterState;
     this.id = id;
     this.manager = manager;
     this.layer = new Konva.Layer({
-      id,
+      name: CanvasControlAdapter.LAYER_NAME,
       imageSmoothingEnabled: false,
       listening: false,
     });
     this.group = new Konva.Group({
-      id: getObjectGroupId(this.layer.id(), uuidv4()),
+      name: CanvasControlAdapter.GROUP_NAME,
       listening: false,
     });
-    this.objectsGroup = new Konva.Group({ listening: false });
+    this.objectsGroup = new Konva.Group({ name: CanvasControlAdapter.GROUP_NAME, listening: false });
     this.group.add(this.objectsGroup);
     this.layer.add(this.group);
 
     this.transformer = new Konva.Transformer({
+      name: CanvasControlAdapter.TRANSFORMER_NAME,
       shouldOverdrawWholeArea: true,
       draggable: true,
       dragDistance: 0,

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

@@ -4,6 +4,10 @@ import { RGBA_RED } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 
 export class CanvasEraserLine {
+  static NAME_PREFIX = 'eraser-line';
+  static GROUP_NAME = `${CanvasEraserLine.NAME_PREFIX}_group`;
+  static LINE_NAME = `${CanvasEraserLine.NAME_PREFIX}_line`;
+
   id: string;
   konvaLineGroup: Konva.Group;
   konvaLine: Konva.Line;
@@ -13,10 +17,12 @@ export class CanvasEraserLine {
     const { id, strokeWidth, clip, points } = eraserLine;
     this.id = id;
     this.konvaLineGroup = new Konva.Group({
+      name: CanvasEraserLine.GROUP_NAME,
       clip,
       listening: false,
     });
     this.konvaLine = new Konva.Line({
+      name: CanvasEraserLine.LINE_NAME,
       id,
       listening: false,
       shadowForStrokeEnabled: false,

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

@@ -7,6 +7,13 @@ import { getImageDTO } from 'services/api/endpoints/images';
 import { assert } from 'tsafe';
 
 export class CanvasImage {
+  static NAME_PREFIX = 'canvas-image';
+  static GROUP_NAME = `${CanvasImage.NAME_PREFIX}_group`;
+  static IMAGE_NAME = `${CanvasImage.NAME_PREFIX}_image`;
+  static PLACEHOLDER_GROUP_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-group`;
+  static PLACEHOLDER_RECT_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-rect`;
+  static PLACEHOLDER_TEXT_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-text`;
+
   id: string;
   konvaImageGroup: Konva.Group;
   konvaPlaceholderGroup: Konva.Group;
@@ -20,15 +27,17 @@ export class CanvasImage {
 
   constructor(imageObject: ImageObject) {
     const { id, width, height, x, y } = imageObject;
-    this.konvaImageGroup = new Konva.Group({ id, listening: false, x, y });
+    this.konvaImageGroup = new Konva.Group({ name: CanvasImage.GROUP_NAME, listening: false, x, y });
-    this.konvaPlaceholderGroup = new Konva.Group({ listening: false });
+    this.konvaPlaceholderGroup = new Konva.Group({ name: CanvasImage.PLACEHOLDER_GROUP_NAME, listening: false });
     this.konvaPlaceholderRect = new Konva.Rect({
+      name: CanvasImage.PLACEHOLDER_RECT_NAME,
       fill: 'hsl(220 12% 45% / 1)', // 'base.500'
       width,
       height,
       listening: false,
     });
     this.konvaPlaceholderText = new Konva.Text({
+      name: CanvasImage.PLACEHOLDER_TEXT_NAME,
       fill: 'hsl(220 12% 10% / 1)', // 'base.900'
       width,
       height,
@@ -73,7 +82,7 @@ export class CanvasImage {
         });
       } else {
         this.konvaImage = new Konva.Image({
-          id: this.id,
+          name: CanvasImage.IMAGE_NAME,
           listening: false,
           image: imageEl,
           width: this.lastImageObject.width,

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

@@ -4,15 +4,23 @@ import { CanvasEraserLine } from 'features/controlLayers/konva/CanvasEraserLine'
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasRect } from 'features/controlLayers/konva/CanvasRect';
 import { getNodeBboxFast } from 'features/controlLayers/konva/entityBbox';
-import { getObjectGroupId } from 'features/controlLayers/konva/naming';
 import { mapId } from 'features/controlLayers/konva/util';
 import type { BrushLine, EraserLine, InpaintMaskEntity, RectShape } from 'features/controlLayers/store/types';
 import { isDrawingTool, RGBA_RED } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 import { assert } from 'tsafe';
-import { v4 as uuidv4 } from 'uuid';
 
 export class CanvasInpaintMask {
+  static NAME_PREFIX = 'inpaint-mask';
+  static LAYER_NAME = `${CanvasInpaintMask.NAME_PREFIX}_layer`;
+  static TRANSFORMER_NAME = `${CanvasInpaintMask.NAME_PREFIX}_transformer`;
+  static GROUP_NAME = `${CanvasInpaintMask.NAME_PREFIX}_group`;
+  static OBJECT_GROUP_NAME = `${CanvasInpaintMask.NAME_PREFIX}_object-group`;
+  static COMPOSITING_RECT_NAME = `${CanvasInpaintMask.NAME_PREFIX}_compositing-rect`;
+
+  private drawingBuffer: BrushLine | EraserLine | RectShape | null;
+  private inpaintMaskState: InpaintMaskEntity;
+
   id = 'inpaint_mask';
   manager: CanvasManager;
   layer: Konva.Layer;
@@ -21,22 +29,21 @@ export class CanvasInpaintMask {
   compositingRect: Konva.Rect;
   transformer: Konva.Transformer;
   objects: Map<string, CanvasBrushLine | CanvasEraserLine | CanvasRect>;
-  private drawingBuffer: BrushLine | EraserLine | RectShape | null;
-  private inpaintMaskState: InpaintMaskEntity;
 
   constructor(entity: InpaintMaskEntity, manager: CanvasManager) {
     this.manager = manager;
-    this.layer = new Konva.Layer({ id: this.id });
+    this.layer = new Konva.Layer({ name: CanvasInpaintMask.LAYER_NAME });
 
     this.group = new Konva.Group({
-      id: getObjectGroupId(this.layer.id(), uuidv4()),
+      name: CanvasInpaintMask.GROUP_NAME,
       listening: false,
     });
-    this.objectsGroup = new Konva.Group({ listening: false });
+    this.objectsGroup = new Konva.Group({ name: CanvasInpaintMask.OBJECT_GROUP_NAME, listening: false });
     this.group.add(this.objectsGroup);
     this.layer.add(this.group);
 
     this.transformer = new Konva.Transformer({
+      name: CanvasInpaintMask.TRANSFORMER_NAME,
       shouldOverdrawWholeArea: true,
       draggable: true,
       dragDistance: 0,
@@ -58,7 +65,7 @@ export class CanvasInpaintMask {
     });
     this.layer.add(this.transformer);
 
-    this.compositingRect = new Konva.Rect({ listening: false });
+    this.compositingRect = new Konva.Rect({ name: CanvasInpaintMask.COMPOSITING_RECT_NAME, listening: false });
     this.group.add(this.compositingRect);
     this.objects = new Map();
     this.drawingBuffer = null;

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

@@ -3,15 +3,22 @@ import { CanvasEraserLine } from 'features/controlLayers/konva/CanvasEraserLine'
 import { CanvasImage } from 'features/controlLayers/konva/CanvasImage';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasRect } from 'features/controlLayers/konva/CanvasRect';
-import { getObjectGroupId } from 'features/controlLayers/konva/naming';
 import { mapId } from 'features/controlLayers/konva/util';
 import type { BrushLine, EraserLine, LayerEntity, RectShape } from 'features/controlLayers/store/types';
 import { isDrawingTool } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 import { assert } from 'tsafe';
-import { v4 as uuidv4 } from 'uuid';
 
 export class CanvasLayer {
+  static NAME_PREFIX = 'layer';
+  static LAYER_NAME = `${CanvasLayer.NAME_PREFIX}_layer`;
+  static TRANSFORMER_NAME = `${CanvasLayer.NAME_PREFIX}_transformer`;
+  static GROUP_NAME = `${CanvasLayer.NAME_PREFIX}_group`;
+  static OBJECT_GROUP_NAME = `${CanvasLayer.NAME_PREFIX}_object-group`;
+
+  private drawingBuffer: BrushLine | EraserLine | RectShape | null;
+  private layerState: LayerEntity;
+
   id: string;
   manager: CanvasManager;
   layer: Konva.Layer;
@@ -19,26 +26,18 @@ export class CanvasLayer {
   objectsGroup: Konva.Group;
   transformer: Konva.Transformer;
   objects: Map<string, CanvasBrushLine | CanvasEraserLine | CanvasRect | CanvasImage>;
-  private drawingBuffer: BrushLine | EraserLine | RectShape | null;
-  private layerState: LayerEntity;
 
   constructor(entity: LayerEntity, manager: CanvasManager) {
     this.id = entity.id;
     this.manager = manager;
-    this.layer = new Konva.Layer({
+    this.layer = new Konva.Layer({ name: CanvasLayer.LAYER_NAME, listening: false });
-      id: entity.id,
+    this.group = new Konva.Group({ name: CanvasLayer.GROUP_NAME, listening: false });
-      listening: false,
+    this.objectsGroup = new Konva.Group({ name: CanvasLayer.OBJECT_GROUP_NAME, listening: false });
-    });
-
-    this.group = new Konva.Group({
-      id: getObjectGroupId(this.layer.id(), uuidv4()),
-      listening: false,
-    });
-    this.objectsGroup = new Konva.Group({ listening: false });
     this.group.add(this.objectsGroup);
     this.layer.add(this.group);
 
     this.transformer = new Konva.Transformer({
+      name: CanvasLayer.TRANSFORMER_NAME,
       shouldOverdrawWholeArea: true,
       draggable: true,
       dragDistance: 0,

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

@@ -2,6 +2,10 @@ import { loadImage } from 'features/controlLayers/konva/util';
 import Konva from 'konva';
 
 export class CanvasProgressImage {
+  static NAME_PREFIX = 'progress-image';
+  static GROUP_NAME = `${CanvasProgressImage.NAME_PREFIX}_group`;
+  static IMAGE_NAME = `${CanvasProgressImage.NAME_PREFIX}_image`;
+
   id: string;
   progressImageId: string | null;
   konvaImageGroup: Konva.Group;
@@ -11,7 +15,7 @@ export class CanvasProgressImage {
 
   constructor(arg: { id: string }) {
     const { id } = arg;
-    this.konvaImageGroup = new Konva.Group({ id, listening: false });
+    this.konvaImageGroup = new Konva.Group({ name: CanvasProgressImage.GROUP_NAME, listening: false });
     this.id = id;
     this.progressImageId = null;
     this.konvaImage = null;
@@ -43,7 +47,7 @@ export class CanvasProgressImage {
         });
       } else {
         this.konvaImage = new Konva.Image({
-          id: this.id,
+          name: CanvasProgressImage.IMAGE_NAME,
           listening: false,
           image: imageEl,
           x,

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

@@ -4,13 +4,16 @@ import Konva from 'konva';
 import type { InvocationDenoiseProgressEvent } from 'services/events/types';
 
 export class CanvasProgressPreview {
+  static NAME_PREFIX = 'progress-preview';
+  static GROUP_NAME = `${CanvasProgressPreview.NAME_PREFIX}_group`;
+
   group: Konva.Group;
   progressImage: CanvasProgressImage;
   manager: CanvasManager;
 
   constructor(manager: CanvasManager) {
     this.manager = manager;
-    this.group = new Konva.Group({ listening: false });
+    this.group = new Konva.Group({ name: CanvasProgressPreview.GROUP_NAME, listening: false });
     this.progressImage = new CanvasProgressImage({ id: 'progress-image' });
     this.group.add(this.progressImage.konvaImageGroup);
   }

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

@@ -3,6 +3,9 @@ import type { RectShape } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 
 export class CanvasRect {
+  static NAME_PREFIX = 'canvas-rect';
+  static RECT_NAME = `${CanvasRect.NAME_PREFIX}_rect`;
+
   id: string;
   konvaRect: Konva.Rect;
   lastRectShape: RectShape;
@@ -11,6 +14,7 @@ export class CanvasRect {
     const { id, x, y, width, height } = rectShape;
     this.id = id;
     const konvaRect = new Konva.Rect({
+      name: CanvasRect.RECT_NAME,
       id,
       x,
       y,

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

@@ -4,15 +4,23 @@ import { CanvasEraserLine } from 'features/controlLayers/konva/CanvasEraserLine'
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasRect } from 'features/controlLayers/konva/CanvasRect';
 import { getNodeBboxFast } from 'features/controlLayers/konva/entityBbox';
-import { getObjectGroupId } from 'features/controlLayers/konva/naming';
 import { mapId } from 'features/controlLayers/konva/util';
 import type { BrushLine, EraserLine, RectShape, RegionEntity } from 'features/controlLayers/store/types';
 import { isDrawingTool, RGBA_RED } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 import { assert } from 'tsafe';
-import { v4 as uuidv4 } from 'uuid';
 
 export class CanvasRegion {
+  static NAME_PREFIX = 'region';
+  static LAYER_NAME = `${CanvasRegion.NAME_PREFIX}_layer`;
+  static TRANSFORMER_NAME = `${CanvasRegion.NAME_PREFIX}_transformer`;
+  static GROUP_NAME = `${CanvasRegion.NAME_PREFIX}_group`;
+  static OBJECT_GROUP_NAME = `${CanvasRegion.NAME_PREFIX}_object-group`;
+  static COMPOSITING_RECT_NAME = `${CanvasRegion.NAME_PREFIX}_compositing-rect`;
+
+  private drawingBuffer: BrushLine | EraserLine | RectShape | null;
+  private regionState: RegionEntity;
+
   id: string;
   manager: CanvasManager;
   layer: Konva.Layer;
@@ -21,23 +29,18 @@ export class CanvasRegion {
   compositingRect: Konva.Rect;
   transformer: Konva.Transformer;
   objects: Map<string, CanvasBrushLine | CanvasEraserLine | CanvasRect>;
-  private drawingBuffer: BrushLine | EraserLine | RectShape | null;
-  private regionState: RegionEntity;
 
   constructor(entity: RegionEntity, manager: CanvasManager) {
     this.id = entity.id;
     this.manager = manager;
-    this.layer = new Konva.Layer({ id: entity.id });
+    this.layer = new Konva.Layer({ name: CanvasRegion.LAYER_NAME, listening: false });
-
+    this.group = new Konva.Group({ name: CanvasRegion.GROUP_NAME, listening: false });
-    this.group = new Konva.Group({
+    this.objectsGroup = new Konva.Group({ name: CanvasRegion.OBJECT_GROUP_NAME, listening: false });
-      id: getObjectGroupId(this.layer.id(), uuidv4()),
-      listening: false,
-    });
-    this.objectsGroup = new Konva.Group({ listening: false });
     this.group.add(this.objectsGroup);
     this.layer.add(this.group);
 
     this.transformer = new Konva.Transformer({
+      name: CanvasRegion.TRANSFORMER_NAME,
       shouldOverdrawWholeArea: true,
       draggable: true,
       dragDistance: 0,
@@ -59,7 +62,7 @@ export class CanvasRegion {
     });
     this.layer.add(this.transformer);
 
-    this.compositingRect = new Konva.Rect({ listening: false });
+    this.compositingRect = new Konva.Rect({ name: CanvasRegion.COMPOSITING_RECT_NAME, listening: false });
     this.group.add(this.compositingRect);
     this.objects = new Map();
     this.drawingBuffer = null;

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

@@ -8,6 +8,22 @@ import {
 import Konva from 'konva';
 
 export class CanvasTool {
+  static NAME_PREFIX = 'tool';
+
+  static GROUP_NAME = `${CanvasTool.NAME_PREFIX}_group`;
+
+  static BRUSH_NAME_PREFIX = `${CanvasTool.NAME_PREFIX}_brush`;
+  static BRUSH_GROUP_NAME = `${CanvasTool.BRUSH_NAME_PREFIX}_group`;
+  static BRUSH_FILL_CIRCLE_NAME = `${CanvasTool.BRUSH_NAME_PREFIX}_fill-circle`;
+  static BRUSH_INNER_BORDER_CIRCLE_NAME = `${CanvasTool.BRUSH_NAME_PREFIX}_inner-border-circle`;
+  static BRUSH_OUTER_BORDER_CIRCLE_NAME = `${CanvasTool.BRUSH_NAME_PREFIX}_outer-border-circle`;
+
+  static ERASER_NAME_PREFIX = `${CanvasTool.NAME_PREFIX}_eraser`;
+  static ERASER_GROUP_NAME = `${CanvasTool.ERASER_NAME_PREFIX}_group`;
+  static ERASER_FILL_CIRCLE_NAME = `${CanvasTool.ERASER_NAME_PREFIX}_fill-circle`;
+  static ERASER_INNER_BORDER_CIRCLE_NAME = `${CanvasTool.ERASER_NAME_PREFIX}_inner-border-circle`;
+  static ERASER_OUTER_BORDER_CIRCLE_NAME = `${CanvasTool.ERASER_NAME_PREFIX}_outer-border-circle`;
+
   manager: CanvasManager;
   group: Konva.Group;
   brush: {
@@ -22,29 +38,28 @@ export class CanvasTool {
     innerBorderCircle: Konva.Circle;
     outerBorderCircle: Konva.Circle;
   };
-  // rect: {
-  //   group: Konva.Group;
-  //   fillRect: Konva.Rect;
-  // };
 
   constructor(manager: CanvasManager) {
     this.manager = manager;
-    this.group = new Konva.Group();
+    this.group = new Konva.Group({ name: CanvasTool.GROUP_NAME });
 
     // Create the brush preview group & circles
     this.brush = {
-      group: new Konva.Group(),
+      group: new Konva.Group({ name: CanvasTool.BRUSH_GROUP_NAME }),
       fillCircle: new Konva.Circle({
+        name: CanvasTool.BRUSH_FILL_CIRCLE_NAME,
         listening: false,
         strokeEnabled: false,
       }),
       innerBorderCircle: new Konva.Circle({
+        name: CanvasTool.BRUSH_INNER_BORDER_CIRCLE_NAME,
         listening: false,
         stroke: BRUSH_BORDER_INNER_COLOR,
         strokeWidth: BRUSH_ERASER_BORDER_WIDTH,
         strokeEnabled: true,
       }),
       outerBorderCircle: new Konva.Circle({
+        name: CanvasTool.BRUSH_OUTER_BORDER_CIRCLE_NAME,
         listening: false,
         stroke: BRUSH_BORDER_OUTER_COLOR,
         strokeWidth: BRUSH_ERASER_BORDER_WIDTH,
@@ -57,20 +72,23 @@ export class CanvasTool {
     this.group.add(this.brush.group);
 
     this.eraser = {
-      group: new Konva.Group(),
+      group: new Konva.Group({ name: CanvasTool.ERASER_GROUP_NAME }),
       fillCircle: new Konva.Circle({
+        name: CanvasTool.ERASER_FILL_CIRCLE_NAME,
         listening: false,
         strokeEnabled: false,
         fill: 'white',
         globalCompositeOperation: 'destination-out',
       }),
       innerBorderCircle: new Konva.Circle({
+        name: CanvasTool.ERASER_INNER_BORDER_CIRCLE_NAME,
         listening: false,
         stroke: BRUSH_BORDER_INNER_COLOR,
         strokeWidth: BRUSH_ERASER_BORDER_WIDTH,
         strokeEnabled: true,
       }),
       outerBorderCircle: new Konva.Circle({
+        name: CanvasTool.ERASER_OUTER_BORDER_CIRCLE_NAME,
         listening: false,
         stroke: BRUSH_BORDER_OUTER_COLOR,
         strokeWidth: BRUSH_ERASER_BORDER_WIDTH,