CODEWITHSUNDEEP
gwtcanvasmouseevent
ahalbert
ahalbert

Reputation: 474

Using drag mouse handlers with GWT canvas

I am currently developing a paint-like application for GWT. I would like to add a mouse handler that runs when the user drags the mouse across the canvas(like making a square,etc;), the problem is that I'm not surewhat handler to use. Looking through the handlers implemented in canvas has lead me to some hints, but the documentation as to what event the apply to is scant.

Does anyone know how I should implement it? Thanks.

Upvotes: 1

Views: 4287

Answers (2)

Strelok
Strelok

Reputation: 51461

There is no "dragging" handler. You imlement "dragging" with MouseDown, MouseMove and MouseUp events.

class YourWidget extends Composite
{
    @UiField
    Canvas yourCanvas;

    private boolean dragging;
    private HandlerRegistration mouseMove;

    @UiHandler("yourCanvas")
    void onMouseDown(MouseDownEvent e) {
      dragging = true;
      // do other stuff related to starting of "dragging"
      mouseMove = yourCanvas.addMouseMoveHandler(new MouseMoveHandler(){
            public void onMouseMove(MouseMoveEvent e) {
                // ...do stuff that you need when "dragging"
            }
      });
    }

    @UiHandler("yourCanvas")
    void onMouseUp(MouseUpEvent e) {
      if (dragging){
          // do other stuff related to stopping of "dragging"
          dragging = false;
          mouseMove.remove(); // in earlier versions of GWT
          //mouseMove.removeHandler(); //in later versions of GWT
      }
    }
}

Upvotes: 6

Jay
Jay

Reputation: 19867

I've messed around with this as well and produced this little thing awhile ago:

http://alpha2.colorboxthing.appspot.com/#/

I basically wrapped whatever I needed with a FocusPanel. In my case it was a FlowPanel.

From that program in my UiBinder:

<g:FocusPanel ui:field="boxFocus" styleName="{style.boxFocus}">
    <g:FlowPanel ui:field="boxPanel" styleName="{style.boxFocus}"></g:FlowPanel>
</g:FocusPanel>

How I use the focus panel (display.getBoxFocus() seen below just gets the FocusPanel above):

display.getBoxFocus().addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {    
    }
});

display.getBoxFocus().addMouseDownHandler(new MouseDownHandler() {
    @Override
    public void onMouseDown(MouseDownEvent event) {
    }
});

display.getBoxFocus().addMouseMoveHandler(new MouseMoveHandler() {
    @Override
    public void onMouseMove(MouseMoveEvent event) {
    }
});

display.getBoxFocus().addMouseUpHandler(new MouseUpHandler() {
    @Override
    public void onMouseUp(MouseUpEvent event) {
    }
});

// etc!

To answer your question about what handler to use for "dragging" I haven't found a single handler to do that for me. Instead I used a MouseDownHandler, MouseMoveHandler, and a MouseUpHandler.

Use the MouseDownHandler to set a flag that determines when the users mouse is down. I do this so that when MouseMoveHandler is called it knows if it should do anything or not. Finally use MouseUpHandler to toggle that flag if the user has the mouse down or not.

There have been some flaws with this method (if the user drags their mouse off of the FocusPanel), but because my application was just a fun side project I haven't concerned myself with it too much. Add in other handlers to fix that if it becomes a big issue.

Upvotes: 0

Related Questions