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

feat(ui): add names to all konva objects

Browse Source 
Makes troubleshooting much simpler
This commit is contained in:
psychedelicious 2024-07-17 12:48:33 +10:00
parent 6571e0f814
commit 03f06f611e
13 changed files with 130 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackground.ts
View File

@ -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() {

9
invokeai/frontend/web/src/features/controlLayers/konva/CanvasBbox.ts
View File

@ -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,

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

@ -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,

18
invokeai/frontend/web/src/features/controlLayers/konva/CanvasControlAdapter.ts
View File

@ -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,

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

@ -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,

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

@ -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.konvaPlaceholderGroup = new Konva.Group({ listening: false });
this.konvaImageGroup = new Konva.Group({ name: CanvasImage.GROUP_NAME, listening: false, x, y });
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,

23
invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts
View File

@ -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;

27
invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
View File

@ -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({
id: entity.id,
listening: false,
});
this.group = new Konva.Group({
id: getObjectGroupId(this.layer.id(), uuidv4()),
listening: false,
});
this.objectsGroup = new Konva.Group({ listening: false });
this.layer = new Konva.Layer({ name: CanvasLayer.LAYER_NAME, listening: false });
this.group = new Konva.Group({ name: CanvasLayer.GROUP_NAME, listening: false });
this.objectsGroup = new Konva.Group({ name: CanvasLayer.OBJECT_GROUP_NAME, 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,

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

@ -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,

5
invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressPreview.ts
View File

@ -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);
}

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

@ -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,

27
invokeai/frontend/web/src/features/controlLayers/konva/CanvasRegion.ts
View File

@ -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.group = new Konva.Group({
id: getObjectGroupId(this.layer.id(), uuidv4()),
listening: false,
});
this.objectsGroup = new Konva.Group({ listening: false });
this.layer = new Konva.Layer({ name: CanvasRegion.LAYER_NAME, listening: false });
this.group = new Konva.Group({ name: CanvasRegion.GROUP_NAME, listening: false });
this.objectsGroup = new Konva.Group({ name: CanvasRegion.OBJECT_GROUP_NAME, 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;

32
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts
View File

@ -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,