tidy(ui): CanvasBrushLine

This commit is contained in:
psychedelicious 2024-07-17 14:32:42 +10:00
parent 178e1cc50b
commit 9d281388e0

View File

@ -7,15 +7,17 @@ export class CanvasBrushLine {
static GROUP_NAME = `${CanvasBrushLine.NAME_PREFIX}_group`; static GROUP_NAME = `${CanvasBrushLine.NAME_PREFIX}_group`;
static LINE_NAME = `${CanvasBrushLine.NAME_PREFIX}_line`; static LINE_NAME = `${CanvasBrushLine.NAME_PREFIX}_line`;
private state: BrushLine;
id: string; id: string;
konva: { konva: {
group: Konva.Group; group: Konva.Group;
line: Konva.Line; line: Konva.Line;
}; };
lastBrushLine: BrushLine;
constructor(brushLine: BrushLine) { constructor(state: BrushLine) {
const { id, strokeWidth, clip, color, points } = brushLine; this.state = state;
const { id, strokeWidth, clip, color, points } = this.state;
this.id = id; this.id = id;
this.konva = { this.konva = {
group: new Konva.Group({ group: new Konva.Group({
@ -39,12 +41,12 @@ export class CanvasBrushLine {
}), }),
}; };
this.konva.group.add(this.konva.line); this.konva.group.add(this.konva.line);
this.lastBrushLine = brushLine; this.state = state;
} }
update(brushLine: BrushLine, force?: boolean): boolean { update(state: BrushLine, force?: boolean): boolean {
if (this.lastBrushLine !== brushLine || force) { if (this.state !== state || force) {
const { points, color, clip, strokeWidth } = brushLine; const { points, color, clip, strokeWidth } = state;
this.konva.line.setAttrs({ this.konva.line.setAttrs({
// A line with only one point will not be rendered, so we duplicate the points to make it visible // 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, points: points.length === 2 ? [...points, ...points] : points,
@ -52,7 +54,7 @@ export class CanvasBrushLine {
clip, clip,
strokeWidth, strokeWidth,
}); });
this.lastBrushLine = brushLine; this.state = state;
return true; return true;
} else { } else {
return false; return false;