Textblock layer

GoJS
1

Hi;

I have a Force Directed diagram in which we use textblocks as labels for each of the nodes.

Is it possible to have those textblocks in a different layer than it’s parts?

We want to have them in a top layer, of sorts, even though the node may be on a layer below.

Thanks.

2

No, each Part (e.g. each Node) is drawn entirely in a single Layer.

But you could have each node’s label be in an Adornment that is in a layer in front of the nodes’ layer. This isn’t what you are asking for, but here’s a sample where all of the link labels are in front of all links:
Link labels always in front
You could do something similar, using a subclass of Node, and having the Adornment be appropriate for you.

3

image

NEW: Node labels always in front

<!DOCTYPE html>
<html>
<head>
  <title>Nodes whose labels are in a different Layer</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { "undoManager.isEnabled": true });

// These Nodes always have an Adornment acting as a label
// Being a separate Part, the Adornment can be in a different Layer,
// thereby allowing them to always be in front of all Nodes.
class LabelAdornmentNode extends go.Node {
  // The template is a static variable on the class
  // It should be the result of calling copyTemplate(true) on an Adornment.
  // NOTE: the use of an Adornment means that it does not behave like the typical Node,
  // including responding to events without special handling.
  static labelTemplate = null;

  updateAdornments() {
    super.updateAdornments();
    if (LabelAdornmentNode.labelTemplate === null) return;
    var ad = this.findAdornment("LABEL");
    if (ad === null) {
      // each Link must have its own copy of the labelTemplate
      ad = LabelAdornmentNode.labelTemplate.copy();
      ad.adornedObject = this;
      this.addAdornment("LABEL", ad);
    }
  }
}
// end of LabelAdornmentNode

myDiagram.nodeTemplate =
  $(LabelAdornmentNode,
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape,
      { fill: "white", width: 80, height: 50 },
      new go.Binding("fill", "color"))
  );

LabelAdornmentNode.labelTemplate =
  $(go.Adornment, "Spot",
    { layerName: "Foreground" },
    $(go.Placeholder),
    $(go.TextBlock,
      { stroke: "brown" },
      new go.Binding("text"))
  ).copyTemplate(true);  // copy the Bindings and prepare it for efficient copying

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue", loc: "0 0" },
  { key: 2, text: "Beta", color: "orange", loc: "50 60" },
  { key: 3, text: "Gamma", color: "lightgreen", loc: "30 80" },
  { key: 4, text: "Delta", color: "pink", loc: "60 100" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>
4

Yep, that did it.

Appreciate it, Walter.