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 c27da3581b
commit 91a420b13e
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', lineJoin: 'round',
globalCompositeOperation: 'source-over', globalCompositeOperation: 'source-over',
stroke: rgbaColorToString(color), 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.konvaLineGroup.add(this.konvaLine);
this.lastBrushLine = brushLine; this.lastBrushLine = brushLine;
@ -35,7 +36,8 @@ export class CanvasBrushLine {
if (this.lastBrushLine !== brushLine || force) { if (this.lastBrushLine !== brushLine || force) {
const { points, color, clip, strokeWidth } = brushLine; const { points, color, clip, strokeWidth } = brushLine;
this.konvaLine.setAttrs({ 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), stroke: rgbaColorToString(color),
clip, clip,
strokeWidth, strokeWidth,

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

@ -26,7 +26,8 @@ export class CanvasEraserLine {
lineJoin: 'round', lineJoin: 'round',
globalCompositeOperation: 'destination-out', globalCompositeOperation: 'destination-out',
stroke: rgbaColorToString(RGBA_RED), 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.konvaLineGroup.add(this.konvaLine);
this.lastEraserLine = eraserLine; this.lastEraserLine = eraserLine;
@ -36,7 +37,8 @@ export class CanvasEraserLine {
if (this.lastEraserLine !== eraserLine || force) { if (this.lastEraserLine !== eraserLine || force) {
const { points, clip, strokeWidth } = eraserLine; const { points, clip, strokeWidth } = eraserLine;
this.konvaLine.setAttrs({ 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, clip,
strokeWidth, 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({ await selectedEntityAdapter.setDrawingBuffer({
id: getBrushLineId(selectedEntityAdapter.id, uuidv4()), id: getBrushLineId(selectedEntityAdapter.id, uuidv4()),
type: 'brush_line', type: 'brush_line',
points: [ points: [pos.x - selectedEntity.x, pos.y - selectedEntity.y],
pos.x - selectedEntity.x,
pos.y - selectedEntity.y,
pos.x - selectedEntity.x,
pos.y - selectedEntity.y,
],
strokeWidth: toolState.brush.width, strokeWidth: toolState.brush.width,
color: getCurrentFill(), color: getCurrentFill(),
clip: getClip(selectedEntity), clip: getClip(selectedEntity),
@ -249,12 +244,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
await selectedEntityAdapter.setDrawingBuffer({ await selectedEntityAdapter.setDrawingBuffer({
id: getEraserLineId(selectedEntityAdapter.id, uuidv4()), id: getEraserLineId(selectedEntityAdapter.id, uuidv4()),
type: 'eraser_line', type: 'eraser_line',
points: [ points: [pos.x - selectedEntity.x, pos.y - selectedEntity.y],
pos.x - selectedEntity.x,
pos.y - selectedEntity.y,
pos.x - selectedEntity.x,
pos.y - selectedEntity.y,
],
strokeWidth: toolState.eraser.width, strokeWidth: toolState.eraser.width,
clip: getClip(selectedEntity), clip: getClip(selectedEntity),
}); });
@ -366,12 +356,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
await selectedEntityAdapter.setDrawingBuffer({ await selectedEntityAdapter.setDrawingBuffer({
id: getBrushLineId(selectedEntityAdapter.id, uuidv4()), id: getBrushLineId(selectedEntityAdapter.id, uuidv4()),
type: 'brush_line', type: 'brush_line',
points: [ points: [pos.x - selectedEntity.x, pos.y - selectedEntity.y],
pos.x - selectedEntity.x,
pos.y - selectedEntity.y,
pos.x - selectedEntity.x,
pos.y - selectedEntity.y,
],
strokeWidth: toolState.brush.width, strokeWidth: toolState.brush.width,
color: getCurrentFill(), color: getCurrentFill(),
clip: getClip(selectedEntity), clip: getClip(selectedEntity),
@ -400,12 +385,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
await selectedEntityAdapter.setDrawingBuffer({ await selectedEntityAdapter.setDrawingBuffer({
id: getEraserLineId(selectedEntityAdapter.id, uuidv4()), id: getEraserLineId(selectedEntityAdapter.id, uuidv4()),
type: 'eraser_line', type: 'eraser_line',
points: [ points: [pos.x - selectedEntity.x, pos.y - selectedEntity.y],
pos.x - selectedEntity.x,
pos.y - selectedEntity.y,
pos.x - selectedEntity.x,
pos.y - selectedEntity.y,
],
strokeWidth: toolState.eraser.width, strokeWidth: toolState.eraser.width,
clip: getClip(selectedEntity), clip: getClip(selectedEntity),
}); });