Issue when adding Node to a Group (Group comes back to foreground)

GoJS
1

I have went through all the samples and I just can’t figure this out.

I have got Groups working and I have Nodes working. When I drag a node onto a Group the data shows the node is grouped with my group, but no matter what I do the Group always comes to the foreground and the Node is hidden visually.

Any suggestions would be helpful.

var finishDrop = function(e, grp) {
  var ok = (grp !== null
            ? grp.addMembers(grp.diagram.selection, true)
            : e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
  if (!ok) e.diagram.currentTool.doCancel();
};

var highlightGroup = function(e, grp, show) {
  if (!grp) return;
  e.handled = true;
  if (show) {
    var tool = grp.diagram.toolManager.draggingTool;
    var map = tool.draggedParts || tool.copiedParts;  // this is a Map
    if (grp.canAddMembers(map.toKeySet())) {
      grp.isHighlighted = true;
      return;
    }
  }
  grp.isHighlighted = false;
};

this.goDiagram.groupTemplate =
    this.goJs(go.Group, "Auto", {
          	background: "transparent",
          	mouseDragEnter: function(e, grp, prev) { 
            	highlightGroup(e, grp, true); 
          	},
          	mouseDragLeave: function(e, grp, next) { 
            	highlightGroup(e, grp, false); 
          	},
          	computesBoundsAfterDrag: true,
          	mouseDrop: finishDrop,
          	handlesDragDropForMembers: true,            
  			locationSpot: go.Spot.Center,
            locationObjectName: "PH",
            resizable: true,
            resizeObjectName: "PH",
            locationSpot: go.Spot.Center,
            isSubGraphExpanded: false
        },
        new go.Binding("itemArray", "boundaryEventArray"),
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
      	this.goJs(go.Panel, "Auto",
        this.goJs(go.Shape, "RoundedRectangle",
            {
              	name: "PH", 
 // 			  fill: SubprocessNodeFill,
  			  	fill: "transparent",
              	stroke: SubprocessNodeStroke,
              	minSize: new go.Size(ActivityNodeWidth, ActivityNodeHeight),
              	portId: "", 
  				fromLinkable: true, 
  				toLinkable: true, 
  				cursor: "pointer",
              	fromSpot: go.Spot.RightSide, 
  				toSpot: go.Spot.LeftSide
            },
            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
            new go.Binding("strokeWidth", "isCall", function(s) { return s ? ActivityNodeStrokeWidthIsCall : ActivityNodeStrokeWidth; })
           ),
          this.goJs(go.Panel, "Vertical",
            { defaultAlignment: go.Spot.Left },
            this.goJs(go.TextBlock,  
              { margin: 3, editable: true },
              new go.Binding("text", "text").makeTwoWay(),
              new go.Binding("alignment", "isSubGraphExpanded", function(s) { return s ? go.Spot.TopLeft : go.Spot.Center; })),
            this.goJs(go.Placeholder,
              { padding: new go.Margin(5, 5) })
          ) 
        )


	);

TIA

Jeff

2

Have you set the simple Node’s layerName to “Background”? There is no setting or binding of Group.layerName tha I can see (please check!), so Groups will be in the default layer, which is in front of the “Background” layer.

Of course when the node does not overlap the group you cannot tell what their relative z-ordering might be.

3

Yes

I have set the GroupTemplate’s layerName to “Background” and I have set the Node’s layerName to “Foreground”.

Still the Node when dropped into the Group disappears behind the Group.

Here is the Json

{
“class”: “go.GraphLinksModel”,
“nodeDataArray”: [{
“isGroup”: true,
“figure”: “RoundedRectangle”,
“text”: “Page Controller”,
“key”: -9,
“loc”: “-272.296875 -119.8125”
}, {
“figure”: “RoundedRectangle”,
“text”: “Header”,
“fill”: “rgb(105,210,231)”,
“stroke”: “rgb(65,180,181)”,
“key”: -3,
“loc”: “-234.296875 -137.8125”,
“group”: -9
}],
“linkDataArray”: []
}

this.goDiagram.groupTemplate =
    this.goJs(go.Group, "Auto", {
            background: "transparent",
            mouseDragEnter: function(e, grp, prev) {
                highlightGroup(e, grp, true);
            },
            mouseDragLeave: function(e, grp, next) {
                highlightGroup(e, grp, false);
            },
            computesBoundsAfterDrag: true,
            mouseDrop: finishDrop,
            handlesDragDropForMembers: true,
            locationSpot: go.Spot.Center,
            locationObjectName: "PH",
            resizable: true,
            resizeObjectName: "PH",
            locationSpot: go.Spot.Center,
            layerName: "Foreground",
            isSubGraphExpanded: false
        },
        new go.Binding("itemArray", "boundaryEventArray"),
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        this.goJs(go.Panel, "Auto",
            this.goJs(go.Shape, "RoundedRectangle", {
                    name: "PH",
                    fill: "transparent",
                    stroke: SubprocessNodeStroke,
                    minSize: new go.Size(ActivityNodeWidth, ActivityNodeHeight),
                    portId: "",
                    fromLinkable: true,
                    toLinkable: true,
                    cursor: "pointer",
                    fromSpot: go.Spot.RightSide,
                    toSpot: go.Spot.LeftSide
                },
                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                new go.Binding("strokeWidth", "isCall", function(s) {
                    return s ? ActivityNodeStrokeWidthIsCall : ActivityNodeStrokeWidth;
                })
            ),
            this.goJs(go.Panel, "Vertical", {
                    defaultAlignment: go.Spot.Left
                },
                this.goJs(go.TextBlock, {
                        margin: 3,
                        editable: true
                    },
                    new go.Binding("text", "text").makeTwoWay(),
                    new go.Binding("alignment", "isSubGraphExpanded", function(s) {
                        return s ? go.Spot.TopLeft : go.Spot.Center;
                    })),
                this.goJs(go.Placeholder, {
                    padding: new go.Margin(5, 5)
                })
            )
        )


    );

this.goDiagram.nodeTemplateMap.add("",
    this.goJs(go.Node, "Auto", {
            selectionAdornmentTemplate: defaultAdornment,
            layerName: "Background"
        }, {
            locationSpot: go.Spot.Center
        },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        new go.Binding("layerName", "isSelected", function(s) {
            return s ? "Foreground" : "";
        }).ofObject(),
        this.goJs(go.Shape, "Ellipse", {
                strokeWidth: 2,
                fill: "rgb(105,210,231)",
                stroke: "rgb(65,180,181)",
                portId: "",
                name: "SHAPE",
                fromLinkable: true,
                toLinkable: true,
                cursor: "pointer",
                toEndSegmentLength: 50,
                fromEndSegmentLength: 40
            },
            new go.Binding("IsWebPage", "IsWebPage"),
            new go.Binding("IsWebComponent", "IsWebComponent"),
            new go.Binding("ShortCode", "ShortCode"),
            new go.Binding("Version", "Version"),

            new go.Binding("figure", "figure"),
            new go.Binding("fill", "fill"),
            new go.Binding("stroke", "stroke")
        ),
        this.goJs(go.TextBlock, {
                margin: 5,
                maxSize: new go.Size(200, NaN),
                wrap: go.TextBlock.WrapFit,
                textAlign: "center",
                editable: true,
                font: "bold 9pt Helvetica, Arial, sans-serif",
                name: "TEXT"
            },
            new go.Binding("text", "text").makeTwoWay()
        )
    )
);

You can clearly see the Node is connected to the Group.

Is there any method that will bring and object to the foreground, or push one to the background?

TIA

Jeff

4

According to the code that you quoted, you set the Part.layerName in each template to exactly the opposite values that you say you did.

5

I was playing with switching them around to see what if anything would happen

Here is the full code

var finishDrop = function(e, grp) {
  var ok = (grp !== null
            ? grp.addMembers(grp.diagram.selection, true)
            : e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
  console.log(e);
  console.log(grp);
  if (!ok) e.diagram.currentTool.doCancel();
};

var highlightGroup = function(e, grp, show) {
  if (!grp) return;
  e.handled = true;
  if (show) {
    var tool = grp.diagram.toolManager.draggingTool;
    var map = tool.draggedParts || tool.copiedParts;  // this is a Map
    if (grp.canAddMembers(map.toKeySet())) {
      grp.isHighlighted = true;
      return;
    }
  }
  grp.isHighlighted = false;
};

this.goDiagram.groupTemplate =
    this.goJs(go.Group, "Auto", {
            background: "transparent",
            mouseDragEnter: function(e, grp, prev) {
                highlightGroup(e, grp, true);
            },
            mouseDragLeave: function(e, grp, next) {
                highlightGroup(e, grp, false);
            },
            computesBoundsAfterDrag: true,
            mouseDrop: finishDrop,
            handlesDragDropForMembers: true,
            locationSpot: go.Spot.Center,
            locationObjectName: "PH",
            resizable: true,
            resizeObjectName: "PH",
            locationSpot: go.Spot.Center,
            layerName: "Background",
  			zOrder:1,
            isSubGraphExpanded: false
        },
        new go.Binding("itemArray", "boundaryEventArray"),
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        this.goJs(go.Panel, "Auto",
            this.goJs(go.Shape, "RoundedRectangle", {
                    name: "PH",
                    fill: "transparent",
                    stroke: SubprocessNodeStroke,
                    minSize: new go.Size(ActivityNodeWidth, ActivityNodeHeight),
                    portId: "",
                    fromLinkable: true,
                    toLinkable: true,
                    cursor: "pointer",
                    fromSpot: go.Spot.RightSide,
                    toSpot: go.Spot.LeftSide
                },
                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                new go.Binding("strokeWidth", "isCall", function(s) {
                    return s ? ActivityNodeStrokeWidthIsCall : ActivityNodeStrokeWidth;
                })
            ),
            this.goJs(go.Panel, "Vertical", {
                    defaultAlignment: go.Spot.Left
                },
                this.goJs(go.TextBlock, {
                        margin: 3,
                        editable: true
                    },
                    new go.Binding("text", "text").makeTwoWay(),
                    new go.Binding("alignment", "isSubGraphExpanded", function(s) {
                        return s ? go.Spot.TopLeft : go.Spot.Center;
                    })),
                this.goJs(go.Placeholder, {
                    padding: new go.Margin(5, 5)
                })
            )
        )
    );



this.goDiagram.nodeTemplateMap.add("",
    this.goJs(go.Node, "Auto", {
            selectionAdornmentTemplate: defaultAdornment,
            layerName: "Foreground",
			zOrder : 2
        }, {
            locationSpot: go.Spot.Center
        },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        this.goJs(go.Shape, "Ellipse", {
                strokeWidth: 2,
                fill: "rgb(105,210,231)",
                stroke: "rgb(65,180,181)",
                portId: "",
                name: "SHAPE",
                fromLinkable: true,
                toLinkable: true,
                cursor: "pointer",
                toEndSegmentLength: 50,
                fromEndSegmentLength: 40
            },
            new go.Binding("IsWebPage", "IsWebPage"),
            new go.Binding("IsWebComponent", "IsWebComponent"),
            new go.Binding("ShortCode", "ShortCode"),
            new go.Binding("Version", "Version"),

            new go.Binding("figure", "figure"),
            new go.Binding("fill", "fill"),
            new go.Binding("stroke", "stroke")
        ),
        this.goJs(go.TextBlock, {
                margin: 5,
                maxSize: new go.Size(200, NaN),
                wrap: go.TextBlock.WrapFit,
                textAlign: "center",
                editable: true,
                font: "bold 9pt Helvetica, Arial, sans-serif",
                name: "TEXT"
            },
            new go.Binding("text", "text").makeTwoWay()
        )
    )
);

TIA

Jeff

6

Assuming you haven’t changed the order of the layers, I don’t see how any Group could appear in front of any simple Node.

7

Well I can tell you that the part if visible on the surface in memberAdded method.

it is getting pushed to the background in the doSimulatedDrop method.

I am tracing now

8

Narrowed it down to it is occurring in the CommitTransaction

How can I verify I have not changed the order of the layers. All I am doing is dragging from my palette and dropping into my group

9

If you searched for “layer” in your code, you’d find any such code. But I think that’s unlikely.

Can you reproduce the problem in any of the sample apps? Or can you provide some other way for us to reproduce the problem?

10

Sure send me a pm and I can share a URL

Jeff

11

The problem was that the Group was collapsed (i.e. Group.isSubGraphExpanded was false), so any node added to the group would automatically disappear.