Change layer of a textblock

GoJS
1

Hi, I have a textblock inside an item array of a node, something like this:

$(go.Node, "Vertical", { selectionAdorned: false }
        , $(go.Panel, "Spot",
            $(go.Shape, "RoundedRectangle",
            {
                fill: "lightgrey",
                width: 100,
                height: 100,
                portId: "",
                fromLinkableSelfNode: true,
                toLinkableSelfNode: true
            }),
            new go.Binding("itemArray", "portArray"),
          {
              itemTemplate:
                $(go.Panel, "Vertical",
                    new go.Binding("alignment", "spot"),
                        $(go.TextBlock,...)

and I’d like to set the layer of the TextBlock to be Adornment, but I can’t assign layerName property to the TextBlock or it’s parent Panel since layerName belongs to a Part, nor can I wrap the text block in a part because I can’t add a part into the panel, is there any way to achieve that?

2

Sorry, but as you have discovered, that is intentionally not possible.

What are you really trying to achieve? What is the real cause of the apparent problem? Maybe there’s another way to do what you want.

3

I want to dynamically add some long text and let it overflow out of the node without moving or expanding, right now the text causes the node to move and the node group to expand.

4

If your node template allows for the text to become long and if the Node.locationSpot and Node.locationObjectName are set so that the non-text pieces of your Node do not move when the TextBlock changes size, that should work.

However I’m not sure about preventing any containing Group that uses a Placeholder to avoid resizing. You could either not use a Placeholder or make sure the Placeholder does not affect the visible size of the group.

5

I see, right now the group expands when I add a long textblock to one of the nodes, but the other nodes in the same group don’t move so they become off-center in the group, is there a way to automatically re-center all the nodes after the placeholder resizes?

6

Here’s a custom Placeholder that computes the area of its member Nodes using not their Node.actualBounds but their Node.selectionObject’s bounds in document coordinates.

  function CustomPlaceholder() {
    go.Placeholder.call(this);
  }
  go.Diagram.inherit(CustomPlaceholder, go.Placeholder);

  CustomPlaceholder.prototype.computeMemberBounds = function(result) {
    if (!(this.part instanceof go.Group)) {
      result.setTo(0, 0, 0, 0);
      return result;
    }

    var sg = /** @type {Group} */ (this.part);
    var minx = Infinity;
    var miny = Infinity;
    var maxx = -Infinity;
    var maxy = -Infinity;

    var itr = sg.memberParts;
    while (itr.next()) {
      var m = itr.value;
      if (!m.isVisible()) continue;
      if (m instanceof go.Link) continue;
      var tl = m.selectionObject.getDocumentPoint(go.Spot.TopLeft);
      var br = m.selectionObject.getDocumentPoint(go.Spot.BottomRight);
      if (tl.x < minx) minx = tl.x;
      if (tl.y < miny) miny = tl.y;
      if (br.x > maxx) maxx = br.x;
      if (br.y > maxy) maxy = br.y;
    }

    if (!isFinite(minx) || !isFinite(miny)) {
      var loc = sg.location;
      var pad = this.padding;
      result.setTo(loc.x + pad.left, loc.y + pad.top, 0, 0);
    } else {
      result.setTo(minx, miny, maxx - minx, maxy - miny);
    }
    return result;
  };

Here is a very simple group template making use of the CustomPlaceholder:

    myDiagram.groupTemplate =
      $(go.Group, "Vertical",
        $(go.TextBlock, new go.Binding("text")),
        $(go.Panel, "Auto",
          $(go.Shape, { fill: "lightgray" }, new go.Binding("fill", "color")),
          $(CustomPlaceholder, { padding: 5 })
        )
      );

Here is a simple node template that allows the text to stick out beyond the “SHAPE”. The text is editable too.

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        { locationObjectName: "SHAPE", selectionObjectName: "SHAPE" },
        $(go.Shape, { name: "SHAPE", width: 10, height: 10 },
          { fill: "white", portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay())
      );