Drawing - controlling z-order

[levi]

Hi,

it seems that the order of adding a DrawItem to a DrawPane also sets the order in which they are drawn.

I'm not immediately finding API to control the z-order of a certain DrawItem, even after draw.

Can we have control over that?

TIA

[aklopp]

Bring to front

This might help:

http://www.smartclient.com/smartgwt/javadoc/com/smartgwt/client/widgets/Canvas.html#bringToFront()

[Isomorphic]

At the moment, the drawing order is the only control over stacking order that's available for DrawPane.

Bear in mind, if we did have a setZIndex() or bringToFront() API on DrawItem, when the underlying drawing mechanism is <canvas>, changing the zIndex would require redrawing everything. So it makes sense to arrange your code to draw things in the intended stacking order.

[levi]

OK thanks.
We'll sort the data before drawing initially then.
If the user wants to adapt the sequence, we'll resort and redraw everything.


Reading this information, I assume you won't even create API for these functions then. No biggie :)

[Isomorphic]

We may eventually add the API, it's just going to have docs that tell you to avoid using it unless you have to (due to the large performance penalty).

[tgilbert]

Hi,

Bumping this thread if you don't mind. If the z-order is controlled by the drawing order, can you please just quickly explain how the draw order is specified ?
(I have two Rects and 1 line between them, whatever the order the line is always in front of both rectangles...)

Thanks,
Thomas

[rox_soporan]

I'm dealing with the same issue...I've tried the example you said..I draw rectangle 1, rectangle 2 and line...each with a different colour. The last drawn shape is the first you see, in this case, the line. Try set all she shapes one on top of the other and you'll see the result..

[tgilbert]

Here is a small test case:

public class DrawTest extends DrawPane {

    final DrawLine line = new DrawLine();
	final DrawRect drawRect = new DrawRect();  
	final DrawRect drawRect2 = new DrawRect();  

	public DrawTest() {
		this.setHeight(400);  
        this.setWidth(800);  
        this.setShowEdges(true);  
        this.setEdgeSize(4);  
        this.setBackgroundColor("papayawhip");  
        this.setOverflow(Overflow.HIDDEN);
        this.setCursor(Cursor.AUTO);
        this.addMouseWheelHandler(new MouseWheelHandler() {
			@Override
			public void onMouseWheel(MouseWheelEvent event) {
				if (event.getWheelDelta() < 0)
					DrawTest.this.setZoomLevel(DrawTest.this.getZoomLevel() * 0.9f);
				else
					DrawTest.this.setZoomLevel(DrawTest.this.getZoomLevel() * 1.1f);
				DrawTest.this.redraw();
			}
		});
        this.init();
        this.addDrawHandler(new DrawHandler() {
			
			@Override
			public void onDraw(DrawEvent event) {
				drawRect.draw();
				line.draw();
				drawRect2.draw();
			}
		});
        this.setCanDrag(true);
        this.draw();
	}
	
	protected void init() {

        drawRect.setLeft(10);  
        drawRect.setTop(10);  
        drawRect.setWidth(150);  
        drawRect.setHeight(100); 
        drawRect.setCanDrag(true);
        drawRect.setFillColor("yellow");
        drawRect.addMovedHandler(new MovedHandler() {
			@Override
			public void onMoved(MovedEvent event) {
		        int[] center1 = drawRect.getCenter();
		        line.setStartPoint(new Point(center1[0], center1[1]));
			}
		});

        drawRect2.setLeft(250);  
        drawRect2.setTop(10);  
        drawRect2.setWidth(150);  
        drawRect2.setHeight(100); 
        drawRect2.setFillColor("red");
        drawRect2.setCanDrag(true);
        drawRect2.addMovedHandler(new MovedHandler() {
			@Override
			public void onMoved(MovedEvent event) {
		        int[] center1 = drawRect2.getCenter();
		        line.setEndPoint(new Point(center1[0], center1[1]));
			}
		});

        line.setEndArrow(ArrowStyle.OPEN);
        line.setLineColor("green");
        
        drawRect2.setDrawPane(this);
        line.setDrawPane(this);
        drawRect.setDrawPane(this);

        int[] center1 = drawRect.getCenter(), center2 = drawRect2.getCenter();;
        line.setStartPoint(new Point(center1[0], center1[1]));
        line.setEndPoint(new Point(center2[0], center2[1]));
	}
}

Here, changing the order of the setDrawPane() calls in init(), or the draw() calls in onDraw() does not have any effect.
How can I control the order then ?

Thanks

[tgilbert]

Please note that using version 4.1d instead solves the problem. The order I use to draw the items will impact the desired zorder.

[d.cavestro]

IMHO having a way to easily bring a DrawItem to front would still be very handy, as it would provide some basic support for implementing items selection.