GoJS v1.8.30 on Ubuntu

GoJS
1

Hi Team

I am using GoJS v1.8.30 in Ubuntu on my local. I am working with Double tree mainly.

I am facing two issues mainly.

  1. I need two different types of nodes, one with circle with an image in the center(Root Node) and Rectangle for all others. I tried that using
    myDiagram.nodeTemplate =
    $(go.Node, “Auto”,
    { isShadowed: false,
    defaultAlignment: go.Spot.LeftCenter },
    // define the node’s outer shape
    $(go.Shape, “Rectangle”,
    { fill: graygrad, stroke: “#D8D8D8”, width: 200, height: 30 },
    new go.Binding(“fill”, “color”)),
    $(go.Picture,
    { width: 32, height: 32, margin: 4 },
    new go.Binding(“source”, “icon”)),
    // define the node’s text
    $(go.TextBlock,
    { margin: 7, font: “600 12px ‘Roboto’, sans-serif”, stroke: “#000”, textAlign: ‘left’ },
    new go.Binding(“text”, “key”),
    new go.Binding(“textAlign”, “alignment”))
    );

    myDiagram.nodeTemplateMap.add(“problem”,
    $(go.Node, “Auto”,
    { width: 100 },
    $(go.Shape, “Circle”,
    { fill: “#fff”, stroke: “#fff”, strokeWidth: 3 })),
    $(go.Picture,
    { width: 32, height: 32, margin: 4, source: “…/images/dashboard-companies-icon.png” },
    new go.Binding(“source”, “icon”))
    );

But the image is not showing.
If that doesn’t work I need to center the text for only that root node at center. textAlign didn’t work for me either.

  1. I am using link routing as Orthogonal, but when the nodes of any of the side increases there is a link starting from the center to the nodes. I don’t want the links starting from center. Instead left and right from the root node is fine. i could not get a code to avoid this. please help.
2

  1. Do you have a directory with the name “…”? If not, that would explain it. Although Linux can certainly have a directory named “…”, it would be highly unusual and prone to confusion.

  2. I’m not sure what you mean. Could you show some small before-and-after screenshots, and also tell us exactly what you are doing to cause that behavior?

3

Hi Walter

Thanks for your reply.

  1. Sorry, that was a mistake from my part when I edited the image path. Even if I give a full URL, it is not working.

  2. I mean two links starting from the middle of the root node. I need to avoid that. Please see the attached image.

    Icon-orthogonal-middle
    Icon-orthogonal-middle.png1366×768 39.5 KB

  3. If you notice the root node, it is blank. U have given color as white and called the image. For some left nodes, I have called the same image which is showing. But for root node it is not showing. As in the above code I am calling a category for this root node called ‘problem’.

  4. Since the number of right and left nodes are higher the Orthogonal routing starts a link from center of the node. I need to avoid that. I need link from left and right only.

4

  1. What is your root node’s data? Does it have category: "problem"? Does it have an icon property, and what is its value?
    If there is a value for icon, perhaps it cannot load that image URL.

  2. I assume the root node is occupying the square central area where nothing appears. I don’t see any links coming from the middle of that area, so I don’t know what you are referring to. Could you sketch how you are expecting the links to be routed?

  3. Same as #1: what is the model’s node data object for the root node?

  4. Oh, are you referring to the links going up from the top of the root node towards the nodes at the top left and the top right of the diagram? And the same for links going down from the bottom of the root node towards the nodes at the bottom left and the bottom right of the diagram?
    If so, remove the setting of setsPortSpot: false on the two instances of TreeLayout.

5

Hi Walter

Thanks again.
1, 3 are same likewise 2, 4.
2, 4 were resolved as you explained. Thanks a lot. I have tried some other but didn’t work. It was very helpful.

For 1 and 2 - I have tried both. I have given category: “problem” and icon: “images/dashboard-companies-icon.png”. Both didn’t work.

But for this
$(go.Node, “Auto”,
{ isShadowed: false,
defaultAlignment: go.Spot.LeftCenter },
// define the node’s outer shape
$(go.Shape, “Rectangle”,
{ fill: graygrad, stroke: “#D8D8D8”, width: 200, height: 30 },
new go.Binding(“fill”, “color”)),
$(go.Picture,
{ width: 32, height: 32, margin: 4 },
new go.Binding(“source”, “icon”)),
// define the node’s text
$(go.TextBlock,
{ margin: 7, font: “600 12px ‘Roboto’, sans-serif”, stroke: “#000”, textAlign: ‘left’ },
new go.Binding(“text”, “key”),
new go.Binding(“textAlign”, “alignment”))
);

it is working as you seen in the image.

But for “problem” it is not working. Is that because of any overlapping or z-index issue.
Root Node
{ key: “Nokia”, color: lavgrad, category: “problem” , icon: “images/dashboard-companies-icon.png”},

6

Well, your “problem” node template consists of a white-filled circle outlined in white. Since the background is white, that might be being drawn correctly. Try changing the colors to test it.

I don’t know why it might not be able to load or draw the image file at “images/dashboard-companies-icon.png”. Try changing the URL to something else that you know works, or replacing the PNG file in that subdirectory.