Is possible use two shapes in a node?

GoJS
1

I using version 1.8.32 and google chrome as a browser.

I have this estructure as nodetemplate:

-node
   -shape(white)
   -shape(black)

Because i want to show the node in this way:
finaltrack

The same shape with different colors and strokewidth to simulate a hollow segment

But this is the result:

track

The black segment doesn t exist.

I tried with another white shape (ones with a close figure, not only segments) and this is the result:

bridge

        // this is the figure generator for both segments (black and white)

    if (shape !== null) {
        var param1 = shape.parameter1;
        if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
    }
    var geo = new go.Geometry();
     var startX = 0;
    var startY = 0;
    var endX = w;
    var endY = 0;
    geo.add(new go.PathFigure(startX, startY)
        .add(new go.PathSegment(go.PathSegment.Line, endX, endY).close()));
 
    return geo;

Why the second one had the black segment and the first doesn t have?

2

That depends on the geometries – what are they?

Could you change the background to be a color different from the ones used in your Shapes? That would make it easier to see.

3

This is the one that i want:
wish

And this is the actual result:

final2

4

I don’t see how you got the geometry or geometries for the complex shape on the left side of the bottom screenshot. Certainly not from the code that you quoted.

Speaking of which, why are you trying to close a straight line? If you just want a straight horizontal line, it would be easier to create the Geometry by:

var geo = new go.Geometry(go.Geometry.Line);
geo.endX = w;
return geo;

I suspect there is something about how you are creating the Panel that holds both Shapes. How about this:

      $(go.Node,
        $(go.Shape, "LineH",
          { isGeometryPositioned: true, stroke: "yellow", strokeWidth: 5, width: 100, height: 0 }),
        $(go.Shape, "LineH",
          { isGeometryPositioned: true, stroke: "green", strokeWidth: 1, width: 100, height: 0 })
      );
5

I tried that, but i have the same result.

Then I deleted all information about ports from my model and it works.

Maybe the problem are the itemtemplate ?

6

What itemTemplate? Just make sure that the Panel that holds your two (or more) Shapes is separate from the Panel that holds your ports. Typically the visual tree will be like:

Node, "Spot",
    Panel, "Position",
        Shape,
        Shape
    port 0,
    port 1,
    . . .