From 91a420b13eb88dca5631cc26d728d19d884fb76f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:06:28 +1000
Subject: [PATCH] feat(ui): fix issue where creating line needs 2 points

---
 .../controlLayers/konva/CanvasBrushLine.ts    |  6 ++--
 .../controlLayers/konva/CanvasEraserLine.ts   |  6 ++--
 .../features/controlLayers/konva/events.ts    | 28 +++----------------
 3 files changed, 12 insertions(+), 28 deletions(-)

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