tidy(ui): CanvasEraserLine

This commit is contained in:
psychedelicious 2024-07-17 14:33:58 +10:00
parent 667a156817
commit 47d415e31c

View File

@ -8,15 +8,16 @@ export class CanvasEraserLine {
static GROUP_NAME = `${CanvasEraserLine.NAME_PREFIX}_group`; static GROUP_NAME = `${CanvasEraserLine.NAME_PREFIX}_group`;
static LINE_NAME = `${CanvasEraserLine.NAME_PREFIX}_line`; static LINE_NAME = `${CanvasEraserLine.NAME_PREFIX}_line`;
private state: EraserLine;
id: string; id: string;
konva: { konva: {
group: Konva.Group; group: Konva.Group;
line: Konva.Line; line: Konva.Line;
}; };
lastEraserLine: EraserLine;
constructor(eraserLine: EraserLine) { constructor(state: EraserLine) {
const { id, strokeWidth, clip, points } = eraserLine; const { id, strokeWidth, clip, points } = state;
this.id = id; this.id = id;
this.konva = { this.konva = {
group: new Konva.Group({ group: new Konva.Group({
@ -40,19 +41,19 @@ export class CanvasEraserLine {
}), }),
}; };
this.konva.group.add(this.konva.line); this.konva.group.add(this.konva.line);
this.lastEraserLine = eraserLine; this.state = state;
} }
update(eraserLine: EraserLine, force?: boolean): boolean { update(state: EraserLine, force?: boolean): boolean {
if (this.lastEraserLine !== eraserLine || force) { if (this.state !== state || force) {
const { points, clip, strokeWidth } = eraserLine; const { points, 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,
clip, clip,
strokeWidth, strokeWidth,
}); });
this.lastEraserLine = eraserLine; this.state = state;
return true; return true;
} else { } else {
return false; return false;