-1

I have a web page (developed in Vaadin) with multiple components in it. In the center, I have a draw2d canvas with items that I can select, drag n drop, remove, etc. Selection gets updated when I click in the canvas, and I want to keep this behavior.

What I need is to prevent clicks outside of the canvas from interacting with the selection. An ugly manner to do this is to keep track of the current selection, and when it is de-selected by a click which was not in the canvas, set it back with its tracked value.

I'd love to hear your ideas about this.

V. Courtois
  • 315
  • 7
  • 20
  • How is your click listener detecting clicks outside the canvas? `yourcanvas.addEventListener('click',(event)=>{/* some code */});` shouldn't be firing for any clicks outside of it. – Gavin Aug 23 '19 at 10:02
  • @Gavin Actually it's not any click listener that does it. I think the canvas natively listens to whole document and not only itself. – V. Courtois Aug 23 '19 at 12:26
  • Please include actual code in your question – Mark Schultheiss Aug 23 '19 at 13:09

1 Answers1

-1

Looks like the canvas was "on top" of other components. So in my case putting z-indexes so that component.z-index > canvas.z-index resolves the issue.

V. Courtois
  • 315
  • 7
  • 20