mouseUpHandler bug when moving mouse

[k1assen]

Firefox 3.6.10
chrome 6.0.472.63

Smartgwtpro 2.3 nightly build 9/9/10

In the example there is an HStack that contains two VStacks. I added borders for clarity. The behavior of the bug is illustrated in example 3 with 1 and 2 provided for context.

1) if I click the mouse in place both the mouseDown and the MouseUP events fire
2) if I click the mouse and move it but stay in the same VStack both events fire
3)if I click the mouse and move it to the other VStack the mouseUp event will not fire.

My intention is to allow a user to select multiple things by clicking and dragging. I would fire the mouseOver event and check if the mouse is down. The closest behavior that I would compare it too would be the functionality in a typical calendar.

Is this something that can be fixed in a nightly build, is there a recommended way to get around this, or am I just doing something wrong? Thanks a lot.

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.events.MouseDownEvent;
import com.smartgwt.client.widgets.events.MouseDownHandler;
import com.smartgwt.client.widgets.events.MouseUpEvent;
import com.smartgwt.client.widgets.events.MouseUpHandler;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.VStack;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class GuiTest implements EntryPoint {
    static boolean down;

    public void onModuleLoad() {
        down = false;
        
        HStack stack = new HStack();
        VStack stack2 = new VStack();
        VStack stack3 = new VStack();
        
        stack3.setSize("250px", "500px");  
        stack3.setBorder("1px solid red");
        stack2.setSize("250px", "500px");
        stack2.setBorder("1px solid red");
        stack.setSize("500px", "500px");
        stack.setBorder("1px solid black");
        
        stack.addMouseDownHandler(new MouseDownHandler() {
            @Override
            public void onMouseDown(MouseDownEvent event) {
                down = true;
            }
        });
        
        stack.addMouseUpHandler(new MouseUpHandler() {
            @Override
            public void onMouseUp(MouseUpEvent event) {
                down = false;
            }
        });
        
        stack.addMember(stack2);
        stack.addMember(stack3);
        stack.draw();
    }
}

[Isomorphic_Paul]

We'd usually recommend using dragging for this kind of thing -- For example:

HStack stack = new HStack();
stack.setCanDrag(true);
stack.addDragStartHandler(new DragStartHandler() {
    @Override
    public void onDragStart(DragStartEvent event) {
        SC.logWarn("dragStart");
    }
});
stack.addDragStopHandler(new DragStopHandler() {
    @Override
    public void onDragStop(DragStopEvent event) {
        SC.logWarn("dragStop");					
    }
});

... // other code unchanged

[k1assen]

This triggers the drag start and drag stop correctly, however when dragging mouse-overs for the internal members are not triggered, so I'm left with the same fundamental problem.

[Isomorphic_Paul]

There are probably various ways to achieve this. A couple of suggestions:

- You could use the dragMove handler and make use of canvas.containsPoint() (passing in the coordinates of the event) to determine whether the event occurred over a selectable member widget.

- or, you could leverage drop behavior:

Set canDrag and canDrop to true on the layout and set dragAppearance to "none"
Set canAcceptDrop to true on the members that are selectable.

Use the dropOver / dropOut / dropMove events to react to the user dragging over the various widgets to mark them as selected.

[k1assen]

Thanks a lot, this method worked.