DrawPane zooming/panning

[scastria]

1. If I call zoom() on a drawPane, firefox does not show any difference. If I run the same code on IE9 or Chrome, the zooming works. this can be reproduced by simply running the SmartGWT showcase zooming and panning demo.

2. Assuming I am using Chrome where the zooming works, after I set my zoom level to 2 for double magnification, how do I control the panning of the DrawItems inside the DrawPane? I queried the left and top of one of my drawitems and they did not change after the zoom. Therefore, the (0,0) position of a draw item is relative to the DrawPane container. That makes sense. So to pan, I need to move the entire DrawPane around? How do I find out what the top left corner of my Drawpane is after the zoom? Do I use getScrollLeft and getScrollTop? I see a viewport width and height but not a viewport offset x and y. I must be missing something. After the zoom, the drawitems are bigger and centered on the drawpane with the outer portions off the screen. There must be something that controls the offset of the drawitems on the drawpane?

[scastria]

anyone????

[scastria]

anyone????

[bc]

I am seeing the same problems on Firefox. This can be seen in the showcase examples for 'zoom and pan' and 'pane rotation'.

I spent most of today investigating this as my app has scrolling issues in firefox (ok in IE). It seems to me that Firefox does not expect DrawItems to extend beyond the edges of the DrawPane. So if a rectangle is drawn with half of it extending past the drawpane, it is cut off. I used Firebug to change the width attributes of the drawpane and sure enough it seems to have truncated anything that's not within the defined dimension of the drawpane. The same test on IE shows that the shape is drawn completely and a scroll bar is presented to view what's beyond.

For my app, I am using the 3.1d nightly build and using browser compatibility mode. To confirm that it was not my firefox installation I tried viewing the showcase from a couple of different machines and saw the same problem.

If I can provide further information to help your investigation please let me know.

[Isomorphic]

DrawPanes do not currently support scrolling on their own, however they can be placed within a scrollable container (Canvas with overflow:auto) and then sized larger than the container.

[bc]

Yes scrolling a drawpane (within a canvas) works in IE. The problem is in firefox. I believe you when you say that scrolling works. I am stumped when I see this problem in the showcase when using firefox.

I am using IE version 8, Firefox v 11. I've tried v5 - 11 in Firefox and have not been able to get it to work. I am using browser compatibility mode and 3.1d nightly build. Can you please check if you are able to see both the drawrects in this code below using firefox. And if you are able to, can you please tell me what I need to do to get it working. Thanks.

Btw, using IE and the code below I can see the second drawrect by scrolling to the right.

public class DrawTest implements EntryPoint {
    public void onModuleLoad() {
    	final DrawPane drawPane = new DrawPane();
        drawPane.setLeft(100);
        drawPane.setTop(100);
        drawPane.setHeight(450);
        drawPane.setWidth(840);
        drawPane.setLeft(25);
        drawPane.setShowEdges(true);
        drawPane.setEdgeSize(4);
        drawPane.setOverflow(Overflow.AUTO);
        drawPane.draw();
        
        DrawRect drawRect = new DrawRect();
        drawRect.setID("ft_drawRect");
        drawRect.setDrawPane(drawPane);
        drawRect.setWidth(75);
        drawRect.setHeight(50);
        drawRect.setFillColor("green");
        drawRect.setLeft(700);
        drawRect.setTop(50);
        drawRect.draw();

        DrawRect drawRect2 = new DrawRect();
        drawRect2.setID("ft_drawRect2");
        drawRect2.setDrawPane(drawPane);
        drawRect2.setWidth(75);
        drawRect2.setHeight(50);
        drawRect2.setFillColor("blue");
        drawRect2.setLeft(900);
        drawRect2.setTop(50);
        drawRect2.draw();
       
        Canvas c = new Canvas();
        c.setHeight100();
        c.setWidth100();
        c.addChild(drawPane);
        c.setOverflow(Overflow.AUTO);
        c.draw();     
    }

}

[Isomorphic]

Once again the DrawPane itself should not have overflow:auto - it's container should. This approach works regardless of browser.

[bc]

Thanks Isomorphic for the hints. That worked for me.

I noticed that in addition to setting overflow to HIDDEN on the drawpane itself, I had to explicitly set the height/width of the drawpane. This is because the canvas only scrolls as far as the set dimensions of the drawpane. In my case, I do not know the dimensions of the drawpane before hand. So I set it after all drawitems are drawn and scrolling works fine.

Thanks again.