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): fix issue where creating line needs 2 points

Browse Source
This commit is contained in:
psychedelicious 2024-07-05 11:06:28 +10:00
parent 061767ede3
commit 135d6f2763
3 changed files with 12 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

28
invokeai/frontend/web/src/features/controlLayers/konva/events.ts
View File

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