grab-controlled scrolling?

[csillag]

Short version:

I would like to implement google maps-style grabbing-and-moving of an area.

Longer version:

I have a layout (let's call it "View") with a fixed size, overflow set to auto. The layout has one member (let's call it "Content"), which has a bigger size, so scrollbars are visible on "view")

Currently, I can move the View around the Content using the scroll bars, but I would like to to this by grabbing the Content with the mouse (like google maps).

Is this supported?

Thank you for your help:

Csillag

[Isomorphic]

Use a custom drag and drop interaction to scroll the View. There's no SmartGWT example, but there's a SmartClient example here and it should prove easy enough to translate.

[csillag]

Hello,

Based on the example, I got it working, but the result does not feel satisfactory; the movement feels shaky somehow, sometimes it's jumping back-and-forth while dragging.

I will report back on this in few days, when I have more time to spare.

Thank you for you help:

Csillag

[RevMen]

Here's a canvas with a drag-scrollable interior that seems to be working pretty well. Really, I just followed the suggestion of rewriting the SmartClient example. I'm still pretty new to all of this, so maybe there's a better/more elegant way to do this.

public class DragPanCanvas extends Canvas {
	
	public Canvas innerCanvas = new Canvas();
	private Integer startScrollLeft;
	private Integer startScrollTop;
	private Integer startX;
	private Integer startY;
	
	Label label = new Label("Watch Me Go");
	
	public DragPanCanvas(){
		
		setWidth(500);
		setHeight(500);
		setShowEdges(true);
		setEdgeSize(3);
		setOverflow(Overflow.SCROLL);
		
		setCanDrag(true);
		setDragAppearance(DragAppearance.NONE);
		
		addDragStartHandler(new DragStartHandler() {
			public void onDragStart(DragStartEvent event) {
				startScrollLeft = getScrollLeft();
				startScrollTop = getScrollTop();
				startX = event.getX();
				startY = event.getY();
			}
		});
		
		addDragMoveHandler(new DragMoveHandler() {
			public void onDragMove(DragMoveEvent event) {
				scrollTo(
					startScrollLeft - event.getX() + startX,
					startScrollTop - event.getY() + startY
					);
			}
			
		});
		
		innerCanvas.setWidth(800);
		innerCanvas.setHeight(800);
		
		label.setWidth(20);
		label.setHeight(10);
		label.setCanDragReposition(true);
		
		innerCanvas.addChild(label);
		
		addChild(innerCanvas);
	}
}

[Isomorphic]

That's just right, and quite smooth. Probably, csillag tried it only in hosted mode with Firebug running.