I am facing an issue while integrating Angular Material Dialog with my component that includes an HTMLCanvas element for drawing. It seems like the BrowserAnimationModule, which is imported in app.module.ts and used by Material Dialog, is causing a delay in displaying the drawing on the canvas. Strangely, nothing gets logged in the console.
whiteboard.component.ts
export class WhiteboardComponent implements OnInit, OnDestroy {
@ViewChild('whiteboard', {static: true})
board: ElementRef<HTMLCanvasElement>;
ctx: CanvasRenderingContext2D;
active = false;
htmlCanvas: HTMLElement;
rectCanvas: ClientRect;
penSize: number;
penColor: string;
subscriptions: Subscription[] = [];
constructor(private canvasService: CanvasService) {
this.subscriptions.push(this.canvasService
.getCanvasEvent()
.subscribe((data: string) => {
const img = new Image();
img.src = data;
this.ctx.drawImage(img, 0, 0);
}));
}
ngOnDestroy(): void {
this.subscriptions.forEach(sub => sub.unsubscribe());
}
sendCanvasData() {
this.canvasService.sendCanvasData(this.board.nativeElement.toDataURL());
}
ngOnInit(): void {
this.penColor = 'black';
this.penSize = 5;
this.rectCanvas = this.htmlCanvas.getBoundingClientRect();
this.ctx = this.board.nativeElement.getContext('2d');
// This part is for resizing
this.board.nativeElement.height = this.board.nativeElement.offsetHeight;
this.board.nativeElement.width = this.board.nativeElement.offsetWidth;
// ***********************
this.board.nativeElement.addEventListener('mousedown', (evt) => {
this.sendCanvasData();
this.startDrawing(evt);
});
this.board.nativeElement.addEventListener('mouseup', (evt) => {
this.sendCanvasData();
this.endDrawing();
});
this.board.nativeElement.addEventListener('mousemove', (evt) => {
this.sendCanvasData();
this.draw(evt);
});
}
startDrawing(e: MouseEvent): void {
this.active = true;
this.draw(e);
}
endDrawing(): void {
this.active = false;
this.ctx.beginPath();
}
draw(e: MouseEvent): void {
if (!this.active) { return; }
this.ctx.lineWidth = this.penSize;
this.ctx.strokeStyle = this.penColor;
this.ctx.lineCap = 'round';
this.ctx.lineTo(e.clientX - this.rectCanvas.left, e.clientY - this.rectCanvas.top);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(e.clientX - this.rectCanvas.left, e.clientY - this.rectCanvas.top);
}
onClearCanvas(): void {
this.ctx.clearRect(0, 0, this.board.nativeElement.width, this.board.nativeElement.height);
this.sendCanvasData();
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule} from '@angular/forms';
import { MaterialModule} from './material/material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormComponent } from './form/form.component';
import { WhiteboardComponent } from './whiteboard/whiteboard.component';
import { ChatComponent } from './chat/chat.component';
import { PlaygroundComponent } from './playground/playground.component';
import { GameInfoFormComponent } from './game-info-form/game-info-form.component';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
FormComponent,
WhiteboardComponent,
ChatComponent,
PlaygroundComponent,
GameInfoFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
// tslint:disable-next-line: deprecation
HttpClientModule,
ReactiveFormsModule,
MaterialModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [GameInfoFormComponent]
})
export class AppModule { }