Position Textblock inside a node

GoJS
1

Hi,

I need a way to put the textblock inside a node in different position base on node type. Something like this:

image

As you can see, for each node, I have to put the label in different position, sometime on bottom, sometime inside picture, …

What is the best way to construct this?
I need your suggestion. Thank you in advance ;-)

2

It depends on what you want to happen as the node changes size or as the text changes size. Generally you can get the effects that you want by using one or more Panels. Read about the different kinds of panels at GoJS Panels -- Northwoods Software.

3

Hi Walter,

Thank you for your response. I figured it out :)

I have 1 more question. On link template, how can we specify the space of the point of end link to the node.

image
image.png236×711 23 KB

I am trying to render above diagram. As you can see, I can a group of node (Colonial, Kraton, …).
I want all link that link to these node in this group has the same padding space.

But right now I am getting this:

image
image.png231×530 8.4 KB

can you give me some hints please?

Thank you alot and have a nice day !

4

Links always connect with ports. By default the whole Node acts as the only port. In your case the width of each node is determined by the width of the widest object, and the width of the TextBlock is naturally dependent on the string and font that it is showing.

At first I thought you would want to set the port element to be the icon rather than the text, as shown by GoJS Ports in Nodes-- Northwoods Software. But in looking again at the vertical positioning of the link connection point, that isn’t clear to me now.

I suggest that instead you set the width of the TextBlock to some fixed number that will get you the behavior that you want.

5

Thank you Walter, It works by setting width for the TextBlocks inside the node. :)
I have another question ;-)

I am trying to change the color of the link (and its arrow) when user clicked on that link.
I follow this example GoJS Highlighting -- Northwoods Software

I change it into link event click instead of node click event on the example. But it does not work.
When I follow exactly example, it works. I don’t know why. Below is my code:

this.myDiagram.linkTemplate =
  $(go.Link, {
    routing: go.Link.AvoidsNodes,
    curve: go.Link.JumpGap,
    //corner: 10
    click: function (e, node) {
      var diagram = node.diagram;
      diagram.startTransaction("highlight");
      diagram.clearHighlighteds();
      node.isHighlighted = true;
      diagram.commitTransaction("highlight");
    }
  },       
    new go.Binding("points").makeTwoWay(),
    // mark each Shape to get the link geometry with isPanelMain: true
    $(go.Shape, { strokeWidth: 2 },
      //new go.Binding("stroke", "color"),
      new go.Binding("strokeDashArray", "hasDash", function (hasDash) { return hasDash ? [2, 4] : []; }),
      new go.Binding("stroke", "", function (model) {
        return model.isHighlighted ? diagramColor.sandyBrown : model.data.color ? model.data.color : diagramColor.white;
      }).ofObject(),
    ),
    $(go.Shape, { visible: false, strokeWidth: 2, stroke: diagramColor.white, toArrow: 'OpenTriangle' },
      new go.Binding("visible", "hasToArrow", function (d) { return d; }),
      //new go.Binding("stroke", "color"),
      new go.Binding("stroke", "", function (model) {
        return model.isHighlighted ? diagramColor.sandyBrown : model.data.color ? model.data.color : diagramColor.white;
      }).ofObject(),
    ),
    $(go.Shape, { visible: false, strokeWidth: 2, stroke: diagramColor.white, fromArrow: 'BackwardOpenTriangle' },
      new go.Binding("visible", "hasFromArrow", function (d) { return d; }),
      //new go.Binding("stroke", "color"),
      new go.Binding("stroke", "", function (model) {
        return model.isHighlighted ? diagramColor.sandyBrown : model.data.color ? model.data.color : diagramColor.white;
      }).ofObject(),
    ),        
  );

this.myDiagram.click = function (e) {
  e.diagram.commit(function (d) { d.clearHighlighteds(); }, "no highlighteds");
};

The thing is only arrow getting change color when I clicked on that link (the link should turn to red as arrow, it changes color but it changes to “blue”, I guess this is default color when link is selected):
image

Can you please give me a hint?

Thank you alot :)

6

The default behavior when the user clicks on a Node or a Link is to select that Part. That means showing a selection Adornment, which by default is blue.

I think you will want to read GoJS Selection -- Northwoods Software. I don’t know if you want to use selection (Part.isSelected) or highlighting (Part.isHighlighted) – it depends on what you want to accomplish and in which circumstances.