3

I have a GWT application containing two canvas instances which are superimposed, i.e. have the same location on screen, one on top of the other. (See http://dev.opera.com/articles/view/html5-canvas-painting, http://html5.litten.com/using-multiple-html5-canvases-as-layers for an example on how it's done. My code is more similar to the second link).

For the lower canvas, I implemented various mouse event handlers - mouseUp, mouseDown, mouseMove etc. I did not implement such handlers for the upper canvas. Also, if that makes any difference, the upper canvas is mostly transparent.

Both canvases has the same parent (a div element).

My problem is that the lower canvas' mouse event handlers do not execute.

My guess is that the upper canvas captures the events, and that they do not propagate to the lower canvas. Do you know a way to work around this? Is there a way to tell a GWT widget to to 'swallow' mouse events?

Thank you!

Hatchmaster
  • 123
  • 1
  • 8
  • I think the problem is because they're all children of the same parent DIV. As far as I know, events are only propagated through the parents (and therefore, not to the siblings). Maybe you could do your own calculations and forward the event to the lower canvas. – Jean-Michel Garcia Aug 28 '12 at 11:57
  • Why don't you add listeners to the parent element, and then let the canvas handle those events? – jusio Aug 28 '12 at 12:05
  • 1
    Jean-Michel - according to my design, the canvases (or rather, their containing classes, each has a wrapper that also contains the handlers' implementation and some more) don't know each other. I'm doing my best to avoid a design where CanvasWrapper forwards the event in code to CanvasWrapper B. – Hatchmaster Aug 28 '12 at 12:29
  • Jusio - in general this is a nice solution and I think it will work. In my case, I get the container 'from a third party' (it is passed as a parameter to the function that creates the canvases, etc) so I rather not modify it unless there's no better solution. But thanks! – Hatchmaster Aug 28 '12 at 12:32
  • 1
    Do you need to capture events in the upper canvas too ? – Jean-Michel Garcia Aug 28 '12 at 13:17
  • No - the upper canvas can and should be 'transparent' to all events in my case. – Hatchmaster Aug 28 '12 at 13:57
  • I believe think link will be really helpful https://developers.google.com/web-toolkit/articles/dom_events_memory_leaks_and_you – Jean-Michel Garcia Aug 28 '12 at 15:30

1 Answers1

0

You can use GWT custom events(GWT Custom Event) to solve this problem.Attach the mouseUp, mouseDown, mouseMove handlers to the upper canvas and Implement Gwt Custom Event Handler to the lower canvas .Now when a MouseUp or MouseDown event is triggered in the upper canvas fire a custom event which will be caught by the lower canvas.Hope this helps

Community
  • 1
  • 1
Ancel Litto
  • 53
  • 6