Search code examples
javascriptvaadinselectiondraw2d

Keep canvas selection when a click is done outside of the canvas

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.

Solution

  • 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.