diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts index 9ce10450a1..e607e705ea 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts @@ -25,7 +25,8 @@ export class CanvasBrushLine { lineJoin: 'round', globalCompositeOperation: 'source-over', stroke: rgbaColorToString(color), - points, + // A line with only one point will not be rendered, so we duplicate the points to make it visible + points: points.length === 2 ? [...points, ...points] : points, }); this.konvaLineGroup.add(this.konvaLine); this.lastBrushLine = brushLine; @@ -35,7 +36,8 @@ export class CanvasBrushLine { if (this.lastBrushLine !== brushLine || force) { const { points, color, clip, strokeWidth } = brushLine; this.konvaLine.setAttrs({ - points, + // A line with only one point will not be rendered, so we duplicate the points to make it visible + points: points.length === 2 ? [...points, ...points] : points, stroke: rgbaColorToString(color), clip, strokeWidth, diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts index 76ebf13cfd..ead3b4e090 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts @@ -26,7 +26,8 @@ export class CanvasEraserLine { lineJoin: 'round', globalCompositeOperation: 'destination-out', stroke: rgbaColorToString(RGBA_RED), - points, + // A line with only one point will not be rendered, so we duplicate the points to make it visible + points: points.length === 2 ? [...points, ...points] : points, }); this.konvaLineGroup.add(this.konvaLine); this.lastEraserLine = eraserLine; @@ -36,7 +37,8 @@ export class CanvasEraserLine { if (this.lastEraserLine !== eraserLine || force) { const { points, clip, strokeWidth } = eraserLine; this.konvaLine.setAttrs({ - points, + // A line with only one point will not be rendered, so we duplicate the points to make it visible + points: points.length === 2 ? [...points, ...points] : points, clip, strokeWidth, }); diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts index 4793faf7b7..53a0218ab6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts @@ -208,12 +208,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.setDrawingBuffer({ id: getBrushLineId(selectedEntityAdapter.id, uuidv4()), type: 'brush_line', - points: [ - pos.x - selectedEntity.x, - pos.y - selectedEntity.y, - pos.x - selectedEntity.x, - pos.y - selectedEntity.y, - ], + points: [pos.x - selectedEntity.x, pos.y - selectedEntity.y], strokeWidth: toolState.brush.width, color: getCurrentFill(), clip: getClip(selectedEntity), @@ -249,12 +244,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.setDrawingBuffer({ id: getEraserLineId(selectedEntityAdapter.id, uuidv4()), type: 'eraser_line', - points: [ - pos.x - selectedEntity.x, - pos.y - selectedEntity.y, - pos.x - selectedEntity.x, - pos.y - selectedEntity.y, - ], + points: [pos.x - selectedEntity.x, pos.y - selectedEntity.y], strokeWidth: toolState.eraser.width, clip: getClip(selectedEntity), }); @@ -366,12 +356,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.setDrawingBuffer({ id: getBrushLineId(selectedEntityAdapter.id, uuidv4()), type: 'brush_line', - points: [ - pos.x - selectedEntity.x, - pos.y - selectedEntity.y, - pos.x - selectedEntity.x, - pos.y - selectedEntity.y, - ], + points: [pos.x - selectedEntity.x, pos.y - selectedEntity.y], strokeWidth: toolState.brush.width, color: getCurrentFill(), clip: getClip(selectedEntity), @@ -400,12 +385,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.setDrawingBuffer({ id: getEraserLineId(selectedEntityAdapter.id, uuidv4()), type: 'eraser_line', - points: [ - pos.x - selectedEntity.x, - pos.y - selectedEntity.y, - pos.x - selectedEntity.x, - pos.y - selectedEntity.y, - ], + points: [pos.x - selectedEntity.x, pos.y - selectedEntity.y], strokeWidth: toolState.eraser.width, clip: getClip(selectedEntity), });