Changing zIndex not updating on drawPane

[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();
  }
}

[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]

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.

[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]

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]

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.

[Isomorphic]

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

[NeilAgg]

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

Unfortunately, I have multiple layers in my application. There are other layers which need to remain in front of the line.
I guess I can call subsequently bringToFront on all elements which are supposed layer on top. That is a workaround, but
the clear() function is still not working as desired.

[Isomorphic]

A couple of things here:

1) line.erase() is working fine - your code is calling line.setDrawPane() after that, which is redrawing it - you only need that call at create time, or if you move the line to another DrawPane

2) tweaking your code like this below shows sendToBack and bringToFront doing what you need

private static DrawPane drawPane;

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

    // don't do this, it will redraw the line if it's been cleared and is unneccesary after init
    //drawLine.setDrawPane(drawPane);
  }

  class MyClickHandler implements ClickHandler {
    public void onClick(ClickEvent event) {
      DrawLine drawLine = (DrawLine)event.getSource();
      SC.logWarn("Calling erase on "+drawLine);

      // not necessary
      //drawLine.erase();

      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");

      setLineZindex(drawLine);

      // not necessary
      //drawPane.markForRedraw();
    }
  }

  public void onModuleLoad() {
    drawPane = new DrawPane();
    drawPane.addDrawHandler(new DrawHandler() {
      public void onDraw(DrawEvent event) {
        DrawLine drawLine = new DrawLine();
        drawLine.addClickHandler(new MyClickHandler());
        drawLine.setStartPoint(new Point(250,0));
        drawLine.setEndPoint(new Point(250,500));
        drawLine.setLineColor("#ff0000");
        drawLine.setLineWidth(20);
        setLineZindex(drawLine);

        // this is equivalent to setDrawPane() and draw()
        drawPane.addDrawItem(drawLine, true);

        drawLine = new DrawLine();
        drawLine.addClickHandler(new MyClickHandler());
        drawLine.setStartPoint(new Point(0,250));
        drawLine.setEndPoint(new Point(500,250));
        drawLine.setLineColor("#00ff00");
        drawLine.setLineWidth(20);
        setLineZindex(drawLine);
        drawPane.addDrawItem(drawLine, true);

        DrawLine drawLine3 = new DrawLine();
        drawLine3.addClickHandler(new MyClickHandler());
        drawLine3.setStartPoint(new Point(50,50));
        drawLine3.setEndPoint(new Point(450,350));
        drawLine3.setLineColor("#0000ff");
        drawLine3.setLineWidth(20);
        setLineZindex(drawLine3);
        drawPane.addDrawItem(drawLine3, true);
      }
    });
    drawPane.setCanDragScroll(true);
    drawPane.setEdgeSize(5);
    drawPane.setEdgeOpacity(25);
    drawPane.setShowEdges(true);
    drawPane.setZoomLevel(1.0);
    drawPane.setWidth(1200);
    drawPane.setHeight(750);
    drawPane.draw();
  }

[NeilAgg]

line.erase() is working fine

I cleaned up my code and removed the call to add the drawPane to the line. It is still not erasing.
I am attaching the updated test case.

[Isomorphic]

Testing your latest code exactly as-is, it works fine - the lines are indeed cleared when you click them.

1) Perhaps you've got some kind of caching issue or the server needs a restart?

2) if not, let us know your browser and OS details

3) and your exact SmartGWT version, of course - we tested with the latest 13.1

[NeilAgg]

Testing your latest code exactly as-is, it works fine

Wow, this is not good. I uploaded a new war file to my server and rebooted it.
Next, I deleted the browser cache.

I still see the lines after I click them.

I am on Chrome Version 131.0.6778.205 (Official Build) (64-bit)
Windows 11 Home 24H2
smartgwt-lgpl 13.1-p20241221

[NeilAgg]

If you try it on my dev server https://dev.3dmathpuzzles.com/ZIndexTest/test.html
Do the lines disappear when you click them?

[NeilAgg]

I just tried it using Microsoft EdgeVersion 131.0.2903.112 (Official build) (64-bit) and I still see the lines after I click on them.

[Isomorphic]

We see the lines stay in place at your page, with some attempt at zindex change on the first click. There's an error in the browser as well: "Uncaught TypeError: (intermediate value).render is not a function".