Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    DrawItem Events on zoomed DrawPane

    SmartClient Version: v8.3_2012-11-20/LGPL Development Only (built 2012-11-20)

    Browser: Firefox 19.0

    Hi,

    I'm having an issue with events of DrawItem when the DrawPane containing them has been zoomed.

    Here's a test case, based on the SmartGwt Showcase

    Code:
    import com.smartgwt.client.types.Cursor;  
    import com.smartgwt.client.types.Overflow;  
    import com.smartgwt.client.widgets.Canvas;  
    import com.smartgwt.client.widgets.Label;  
    
    import com.smartgwt.client.widgets.drawing.DrawItem;  
    import com.smartgwt.client.widgets.drawing.DrawLabel;  
    import com.smartgwt.client.widgets.drawing.DrawLine; 
    import com.smartgwt.client.widgets.drawing.DrawPane;    
    import com.smartgwt.client.widgets.drawing.DrawRect;  
    import com.smartgwt.client.widgets.drawing.DrawTriangle;  
    import com.smartgwt.client.widgets.drawing.Point;  
    import com.smartgwt.client.widgets.drawing.events.ClickEvent;  
    import com.smartgwt.client.widgets.drawing.events.ClickHandler;  
    import com.smartgwt.client.widgets.drawing.events.MouseOverEvent;  
    import com.smartgwt.client.widgets.drawing.events.MouseOverHandler;   
    import com.smartgwt.client.widgets.events.DrawEvent;  
    import com.smartgwt.client.widgets.events.DrawHandler;  
    import com.smartgwt.client.widgets.layout.VStack;  
      
    import com.google.gwt.core.client.EntryPoint;  
      
    public class DrawingMouseEventsSample implements EntryPoint {  
      
        public void onModuleLoad() {  
            final DrawPane drawPane = new DrawPane();  
            drawPane.setHeight(450);  
            drawPane.setWidth(700);  
            drawPane.setShowEdges(true);  
            drawPane.setEdgeSize(4);  
            drawPane.setBackgroundColor("papayawhip");  
            drawPane.setOverflow(Overflow.HIDDEN);  
            drawPane.setCursor(Cursor.AUTO);  
    
    ValueChangedHandler zoomSliderValueChangeHandler = new ValueChangedHandler() {  
    			@Override  
    			public void onValueChanged(ValueChangedEvent event) {  
    				Slider sliderItem = (Slider) event.getSource();  
    				drawPane.zoom(sliderItem.getValue());  
    			}  
    		}; 
    		
    	Slider zoomSlider = new Slider();  
    	zoomSlider.setMinValue(.10f);  
    	zoomSlider.setMaxValue(3.0f);  
    	zoomSlider.setNumValues(300);  
    	zoomSlider.setWidth(400);  
    	zoomSlider.setLeft(25);  
    	zoomSlider.setTop(550);  
    	zoomSlider.setValue(1.0f);  
    	zoomSlider.setRoundValues(false);  
    	zoomSlider.setRoundPrecision(2);  
    	zoomSlider.setTitle("Zoom Shapes");  
    	zoomSlider.setVertical(false);  
    		zoomSlider.addValueChangedHandler(zoomSliderValueChangeHandler);  
    		zoomSlider.draw();  
              
            final Label label = new Label();  
            label.setBorder("1px solid black");  
            label.setHeight(30);  
            label.setWidth(700);  
            label.setPadding(5);  
              
            VStack layout = new VStack();  
            layout.setMembersMargin(10);  
            layout.setMembers(drawPane, label);  
              
            drawPane.addDrawHandler(new DrawHandler() {  
                  
                @Override  
                public void onDraw(DrawEvent event) {  
    
    		DrawPane drawPane = (DrawPane) event.getSource();  
    		DrawLabel triangleLabel = new DrawLabel();  
    		triangleLabel.setDrawPane(drawPane);  
    		triangleLabel.setLeft(50);  
    		triangleLabel.setTop(175);  
    		triangleLabel.setContents("Triangle");  
    		triangleLabel.draw();  
    
    		DrawTriangle drawTriangle = new DrawTriangle();  
    		drawTriangle.setDrawPane(drawPane);  
    		drawTriangle.setPoints(new Point(100,50),new Point(150,150),new Point(50,150));  
    		drawTriangle.draw(); 
    
    		DrawLabel rectLabel = new DrawLabel();  
    		rectLabel.setDrawPane(drawPane);  
    		rectLabel.setLeft(200);  
    		rectLabel.setTop(175);  
    		rectLabel.setContents("Rect");  
    		rectLabel.draw();  
    
    		DrawRect drawRect = new DrawRect();  
    		drawRect.setDrawPane(drawPane);  
    		drawRect.setLeft(200);  
    		drawRect.setTop(50);  
    		drawRect.setWidth(150);  
    		drawRect.setHeight(100);  
    		drawRect.draw();  
    			
    		DrawItem[] drawItems = drawPane.getDrawItems();  
    		for (int i = 0; i < drawItems.length; i++) {  
    			DrawItem drawItem = drawItems[i];  
    			drawItem.addClickHandler(new ClickHandler() {  
    				@Override  
    				public void onClick(ClickEvent event) {  
    					label.setContents("Click on " + ((DrawItem)event.getSource()).getID());  
    				}  
    			});  
    
    			drawItem.addMouseOverHandler(new MouseOverHandler() {  
    				@Override  
    				public void onMouseOver(MouseOverEvent event) {  
    					label.setContents("Mouse Over " + ((DrawItem)event.getSource()).getID());      
    				}  
    			});
    		}		
               }
        });  
      
            layout.draw();  
        }  
      
    }

    In this case, after zooming in on the canvas, the mouseover handlers no longer sync up with the locations of the draw items.

    Any advice on this?
    Last edited by barcom; 25 Feb 2013, 09:47. Reason: removed unnecessary imports

    #2
    Thanks for the clear test case. This was a tricky issue with coordinate transform for zoomed vs not zoomed, and is now fixed for tomorrow's 3.1 and 4.0 builds.

    Comment


      #3
      That works perfectly.

      Thanks for the quick fix.

      Comment

      Working...
      X