Changing zIndex not updating on drawPane

[Isomorphic]

If what you want is to bring each line to the front as you draw or click on it, use line.bringToFront().

[NeilAgg]

This is strange. I figured I could call erase() on the line, change its zIndex, and then draw it again.

As a first step, I just call erase() on the line, but that did not remove it from the drawing on the screen.
I added a log entry before calling erase, I see that in the console, but no errors.

I am attaching my test case.

[NeilAgg]

I just realized I am getting these logs in the Developer Console:

WARN:Log:Cannot change configuration property 'zIndex' to 3000000 now that component isc_DrawLine_4 has been created.

I also looked into moveAbove(), it is defined on Canvas, but DrawItem does not extend from it so I can't call that on lines.

Is there a way to do what I am asking or it is outside the scope of the component?

[NeilAgg]

I changed the constants to 1 million, 2 million, and 3 million. No improvement.
You can see it here https://dev.3dmathpuzzles.com/ZIndexTest/test.html

I am attaching a test case.

[NeilAgg]

Automatic zIndex management uses much higher numbers (in the thousands) due to various browser bugs.

I changed my code to use these numbers:

public static void setLineZindex(DrawLine drawLine) {
    if( "#ff0000".equals(drawLine.getLineColor()) )
      drawLine.setZIndex(10000);
    else if( "#00ff00".equals(drawLine.getLineColor()) )
      drawLine.setZIndex(20000);
    else if( "#0000ff".equals(drawLine.getLineColor()) )
      drawLine.setZIndex(30000);
  }

And I still get the same behavior.

[Isomorphic]

Automatic zIndex management uses much higher numbers (in the thousands) due to various browser bugs. You are better off using either high values or using relative zIndex management (moveAbove() for example).

[NeilAgg]

In my application, the lines may change their zIndex when the user clicks on them.

Here is a simple example: https://dev.3dmathpuzzles.com/3dmp/D...therlink3.html
In this example, red lines have a zIndex of 1, green lines have a zIndex of 2, and blue lines have a zIndex of 3.
Therefore, blue lines should be on top, green lines in the middle, and red lines at the bottom.

When I change the color of a line, I also change it's zIndex, but the UI does not show the line
in the correct zOrder. When I change the vertical line to blue, it should be on top, but the
horizontal green line is still overlaying it.

Here is my EntryPoint:

package com._3dmathpuzzles.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.drawing.DrawPane;

public class DiagonalSlitherlink3 implements EntryPoint {
  private DrawPane drawPane;

  public void onModuleLoad() {
    drawPane = new DrawPane();
    DiagonalSlitherlinkDrawHandler3 drawHandler = new DiagonalSlitherlinkDrawHandler3(drawPane);
    drawPane.addDrawHandler(drawHandler);
    drawPane.setCanDragScroll(true);
    drawPane.setHtmlElement("gwt");
    drawPane.setMatchElement(true);
    drawPane.draw();
  }
}

Here is the draw handler:

package com._3dmathpuzzles.gwt.client;

import com.smartgwt.client.widgets.drawing.DrawLine;
import com.smartgwt.client.widgets.drawing.DrawPane;
import com.smartgwt.client.widgets.drawing.Point;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;

public class DiagonalSlitherlinkDrawHandler3 implements DrawHandler {
  private DrawPane drawPane;

  public DiagonalSlitherlinkDrawHandler3(DrawPane drawPane) {
    this.drawPane = drawPane;
  }

  public void onDraw(DrawEvent event) {
    DrawLine drawLine = new DrawLine();
    drawLine.addClickHandler(new LineClickHandler3(drawPane,drawLine));
    drawLine.setDrawPane(drawPane);
    drawLine.setStartPoint(new Point(250,0));
    drawLine.setEndPoint(new Point(250,500));
    drawLine.setLineColor("#ff0000");
    drawLine.setLineWidth(20);
    setLineZindex(drawLine);
    drawLine.draw();

    drawLine = new DrawLine();
    drawLine.addClickHandler(new LineClickHandler3(drawPane,drawLine));
    drawLine.setDrawPane(drawPane);
    drawLine.setStartPoint(new Point(0,250));
    drawLine.setEndPoint(new Point(500,250));
    drawLine.setLineColor("#00ff00");
    drawLine.setLineWidth(20);
    setLineZindex(drawLine);
    drawLine.draw();
  }

  public static void setLineZindex(DrawLine drawLine) {
    if( "#ff0000".equals(drawLine.getLineColor()) )
      drawLine.setZIndex(1);
    else if( "#00ff00".equals(drawLine.getLineColor()) )
      drawLine.setZIndex(2);
    else if( "#0000ff".equals(drawLine.getLineColor()) )
      drawLine.setZIndex(3);
  }
}

Here is the click handler:

package com._3dmathpuzzles.gwt.client;

import com.smartgwt.client.widgets.drawing.DrawLine;
import com.smartgwt.client.widgets.drawing.DrawPane;
import com.smartgwt.client.widgets.drawing.events.ClickEvent;
import com.smartgwt.client.widgets.drawing.events.ClickHandler;

public class LineClickHandler3 implements ClickHandler {
  private DrawPane drawPane;
  private DrawLine drawLine;

  public LineClickHandler3(DrawPane drawPane, DrawLine drawLine) {
    this.drawPane = drawPane;
    this.drawLine = drawLine;
  }

  public void onClick(ClickEvent event) {
    if( "#ff0000".equals(drawLine.getLineColor()) )
      drawLine.setLineColor("#00ff00");
    else if( "#00ff00".equals(drawLine.getLineColor()) )
      drawLine.setLineColor("#0000ff");
    else if( "#0000ff".equals(drawLine.getLineColor()) )
      drawLine.setLineColor("#ff0000");
    DiagonalSlitherlinkDrawHandler3.setLineZindex(drawLine);
    drawPane.markForRedraw();
  }
}