Hi,
Also I tried by adding a div element around the canvas like this,
<div #canvasDivElement
(click)="onCanvasDivClicked($event)"
(keydown)="onCanvasDivKeydown($event)">
<canvas #canvas id="diagram" draggable="true"></canvas>
</div>
public onCanvasDivClicked(e: MouseEvent): void {
var args = e;
}
public onCanvasDivKeydown(e: KeyboardEvent): void {
this.handleKeyDown(e);
}
this.canvasDivElement.nativeElement.addEventListener("keydown", (args) => {
this.handleKeyDown(args); // Not called . . .
});
Here onCanvasDivClicked is called but onCanvasDivKeydown is not called.
Regards,
Kannan
Kannan Thirumal wrote on Apr 23
rd, 2020 at 1:52pm:
Hi,
This works fine when the diagram is opened in one tab. In my application, I've added the canvas in a component and loading the component in more than one tab. In that case, this event is raised for only the canvas in the last tab. May I know how to fix this issue? I tried the below methods,
this.canvas.nativeElement.addEventListener("keydown", (args) => {
// This is not called for any canvas
});
var diagramFocusDiv = (this.diagram as any).focusDiv as any;
diagramFocusDiv.addEventListener("keydown", (args) => {
// This is called for only one canvas (the lastly opened)
});
document.onkeydown = (e) => {
// This also not works properly
};
Regards,
Kannan