Announcement

**Isomorphic** · 11 Jan 2012, 14:25

@mike_mac your settings look correct, be sure to run a GWT compile, then if there's still a problem, check with Firebug to make sure ISC_Drawing.js is being loaded and not ending up as a 404.

@bc there was an issue with zoom in Firefox, it's been patched (get the fully patched build from smartclient.com/builds).

bc · 12 Jan 2012, 06:26

The zoom and pan works differently now than it did with the 3.0 nightly builds from November which I was using until now. My draw pane contains objects that extend beyond its width and height. Previously when I zoomed out it did it in such a manner that the objects outside the boundary would become visible as the size of each object got smaller - and this was nice as it would allow me to see the entire chart. Now it seems to zoom and pan only the objects that are currently in the viewing window.

Secondly, I have not had luck getting scrolling to work. Has anyone gotten scrolling of a draw pane to work? Can Isomorphic post some code that demonstrates this - please. I posted sample code in post #20 - basically using the same code as the showcase but extending the line to coordinates well beyond the boundary of the draw pane. Can someone tell me if I should do it differently.

Thanks.

**mike_mac** · 13 Jan 2012, 08:10

Thanks for the response I have something after a clean and delete of caches except now I'm having awful problems trying to get mouse events working on my drawing .... I'm using GWT 2.4 / SmartGwt 3.0 and testing on firefox and chrome.

I can't get any of the drawing.events.* working ... the api seems so straight forward, I must be doing something wrong. Any help would be greatly appreciated.

I have a structure where I layer some images on top of one another something along the lines of ...

Code:

DrawPane
+- DrawGroup
    +- DrawImg
    +- DrawGroup
        +-DrawImg
        +-DrawLine
        +-DrawLine
    +- DrawGroup    
etc.

Only the top DrawGroup is added to the DrawPane and subsequent DrawItems are added to that layers parent DrawGroup. Everything is drawn ok and seems fine.

For each item I add a click handler (I've tried before and after the call to draw()) but ... nothing, no event.

Exasperated I even tried following the example in the showcase by doing a getDrawItems() on the pane after everything is added (after the "new MyGroup" below) but that is returning an empty list !?!.

Just to prove some events are working ... I added the com.smartgwt.client.widgets.events.MouseDownHandler to the DrawPane and that is working fine ... I'm stuck ... I've even tried the latest 3.0p nightly build. No effect ...

Code:

    public MyWindow()
    {
        super();
        VLayout vLayout = new VLayout();

        getDrawPane().addDrawHandler(new DrawHandler() 
        {
            public void onDraw(DrawEvent event)
            {
                DrawPane pane = (DrawPane) event.getSource();
                MyGroup group = new MyGroup(pane, null);     
                group.addMouseDownHandler( new com.smartgwt.client.widgets.drawing.events.MouseDownHandler() 
                {
                    public void onMouseDown(MouseDownEvent event)
                    {
                        GWT.log(((DrawItem)event.getSource()).getID()+ "CLICKKKKKKKKKKKKK!!!!!!!!");
                        SC.say(((DrawItem)event.getSource()).getID());
                    }
                });
            }
        });
        
        vLayout.addMember(getDrawPane());
        vLayout.setTop(20);
        addChild(vLayout);
        setWidth(600);
        setHeight(200);
        setTitle("My Drawing");
        setCanDragReposition(true);
    }
    
    private DrawPane getDrawPane()
    {
        if(drawPane == null)
        {
            drawPane = new DrawPane();  
            drawPane.setHeight(200);  
            drawPane.setWidth(700);  
            drawPane.setShowEdges(true);  
            drawPane.setEdgeSize(2);  
            drawPane.setBackgroundColor("papayawhip");  
            drawPane.setOverflow(Overflow.HIDDEN);  
            drawPane.setCursor(Cursor.AUTO);  
            drawPane.addMouseDownHandler(new MouseDownHandler() {
                @Override
                public void onMouseDown(
                        com.smartgwt.client.widgets.events.MouseDownEvent event)
                {
                    GWT.log(((DrawPane)event.getSource()).getID()+ "CLICKKKKKKKKKKKKK!!!!!!!!");
                    SC.say(((DrawPane)event.getSource()).getID());
                }
            });            
        }
        return drawPane;
    }

example of a group ...

Code:

    public MyGroup(DrawPane pane)
    {
        this.setDrawPane(pane);
        build()
    }
    
    public void build()
    {
        super.draw();  
        DrawImage drawImage = new MyImg();
        drawImage.setDrawGroup(this);
        items.add(drawImage);
        drawImage.draw();    
        drawImage.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event)
            {
                GWT.log(((DrawItem)event.getSource()).getID()+ "CLICKKKKKKKKKKKKK!!!!!!!!");
                SC.say(((DrawItem)event.getSource()).getID());
            }
        });
        
        etc.

**mike_mac** · 16 Jan 2012, 16:19

Bump ... Hey, sorry for being a bit pushy but I'm blocked ... any ideas ?

**mike_mac** · 17 Jan 2012, 11:01

More info but not sure it makes much sense.

Through trial and error, this seems to be related to the population of DrawPane to each of the contained objects ... In the code below, if I add the DrawLine to the DrawGroup it is created in, its drawn but I don't receive any events. If I add it to the DrawPane, its drawn and I do get events.

I don't get events for my image regardless of which object its added to, the pane or the group.

Code:

public class MyGroup extends DrawGroup 
{

    public MilanDevice(DrawPane pane, MyObject obj)
    {
        this.setDrawPane(pane);
        build();
    }

    public void build()
    {
        super.draw();
        DrawImage drawImage = new MyImg();
        // drawImage.setDrawPane(this.getDrawPane());
        drawImage.setDrawGroup(this);
        drawImage.draw();
        drawImage.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event)
            {
                GWT.log(((DrawItem) event.getSource()).getID()
                        + " CLICKKKKKKKKKKKKK!!!!!!!!");
                SC.say(((DrawItem) event.getSource()).getID());
            }
        });
        drawLine();
    }

    private void drawLine()
    {
        DrawLine drawLine = new DrawLine();
        drawLine.setDrawGroup(this);
        //drawLine.setDrawPane(this.getDrawPane());
        drawLine.setStartPoint(new Point(200, 50));
        drawLine.setEndPoint(new Point(300, 150));
        drawLine.setLineWidth(5);
        drawLine.draw();
        drawLine.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event)
            {
                GWT.log(((DrawItem) event.getSource()).getID()
                        + " CLICKKKKKKKKKKKKK!!!!!!!!");
                SC.say(((DrawItem) event.getSource()).getID());
            }
        });
        drawLine.addMouseOverHandler(new MouseOverHandler() {
            public void onMouseOver(MouseOverEvent event)
            {
                GWT.log(((DrawItem) event.getSource()).getID() + " Mouse over");
            }
        });
    }
}

Code:

public class MyImg extends DrawImage
{ 
    public MyImg ()
    {
        setSrc("images/blah.jpg");
        setWidth(478);
        setHeight(72);
        setTop(50);
        setLeft(40);
    }
}

**kkasravi** · 19 Jan 2012, 11:20

The example I used is http://www.smartclient.com/#ZoomAndPan and I changed DrawRect's top to be 575. I then zoomed out and the rectangle now appears. This has been checked into main and should be available on nightlies.

**lo-ran** · 20 Jan 2012, 01:12

It would nice to bring back the initial demo app (as advertised in this blog : http://blog.isomorphic.com/drawing-cross-browser-vector-graphics ).

It would make a perfect proof of concept and "how to" source for both smartclient and smartgwt users.

**jwilker** · 27 Feb 2012, 08:51

It would be nice if the SmartGWT drawing showcase (e.g. http://www.smartclient.com/smartgwt/showcase/#mouse_events) included DrawImages.

I agree with mike mac that mouse events do not appear to work with DrawImages.

**Isomorphic** · 27 Feb 2012, 17:34

We've made a change in the 3.1d branch to address the issue whereby DrawImages don't fire events - this will show up in nightly builds dated Feb 28 or greater

**jwilker** · 28 Feb 2012, 06:07

Thanks very much for your prompt response! Events now appear to be firing properly for DrawImages.

**mike_mac** · 28 Feb 2012, 08:38

Does it work for DrawImages contained within a DrawGroup ?

**Isomorphic** · 8 Mar 2012, 17:36

We've made a change to 3.1d to get events working within DrawGroups.
To make use of this you'll need to specify an explicit left/top/width and height on the DrawGroup. This defines the area the user will be interacting with - it has no effect on the actual position of items within the draw group.
Once you've defined the group rectangle in this way, the user can interact with it - dragging will fire the drag event handlers for the group and by default move all items around, click will fire the click handler for the group, etc.

This change is available in the latest nightly build (Dated March 8, 2012), 3.1d branch only.

Announcement

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment