Background image for nodes

GoJS
1

Can I set a background image for nodes?

For example, we have 2 images that we import from files.

import {image1} from "./images/image1.png";
import {image2} from "./images/image2.png";

There is a background key in Node data.

[
    {key:0, n:"node1", background:"image1"},
    {key:1, n:"node2", background:"image2"},
    {key:2, n:"node3"}
]

Accordingly, the background image for node1 should be image1, for node2 the background image should be image2. There should not be any background images for node3.

Is this possible? (for genogram nodes)

2

You need to have the Picture in your Node template have a data Binding of the Picture.source property to the data “background” property.

The Binding would need a conversion function that turns a string such as “image1” to the URL that the Picture (HTMLImageElement) needs.

See the Org Chart Editor and Org Chart (static) samples.

1 Like
3

I tried but I couldn’t set it as background. it always appears as an image next to the node or not at all.

Where should I add the picture part for the background image in the node for the male nodes in the last genogram sample you shared?

myDiagram.nodeTemplateMap.add("M",  // male
  $(go.Node, "Vertical",
    { locationSpot: go.Spot.Center, locationObjectName: "ICON", selectionObjectName: "ICON" },
    new go.Binding("opacity", "hide", h => h ? 0 : 1),
    new go.Binding("pickable", "hide", h => !h),
    $(go.Panel,
      { name: "ICON" },
      $(go.Shape, "Square",
        { width: 40, height: 40, strokeWidth: 2, fill: "white", stroke: "#919191", portId: "" }),
      $(go.Panel,
        { // for each attribute show a Shape at a particular place in the overall square
          itemTemplate:
            $(go.Panel,
              $(go.Shape,
                { stroke: null, strokeWidth: 0 },
                new go.Binding("fill", "", attrFill),
                new go.Binding("geometry", "", maleGeometry))
            ),
          margin: 1
        },
        new go.Binding("itemArray", "a")
      )
    ),
    $(go.TextBlock,
      { textAlign: "center", maxSize: new go.Size(80, NaN), background: "rgba(255,255,255,0.5)" },
      new go.Binding("text", "n"))
  ));
4

Depends on where you want the picture. Maybe replace the Panel that has an itemTemplate with a Picture?

Or if you don’t want to replace that Panel with the colored sectors in it depending on data attributes to indicate various markers or conditions, you could use a Picture as a background by using a Panel:

Panel
    Picture { width: 40, height: 40 }
    Panel
        ... Panels copied from itemTemplate, each also 40x40 ...
1 Like
5

It draws both the shape and the picture on top of each other. That’s why the image moves out of the round shape for the female node.
How can I avoid this?

Screenshot_2

6

Do you want the Shape(s) to be drawn at all? If not, follow my first suggestion and delete the outer Panel that has the binding on Panel.itemArray.

If so, I don’t think you followed my second suggestion because the image seems to be in front of the Shape(s). The Picture needs to come before the Panel with the Shape and item Panels if you want it to be behind them.

7

Yes, I want the figure drawn. The inside part has to be the picture. If the node is female, the parts of the picture outside the circle should not be visible. but the frame of the circle should be visible.

https://gojs.net/latest/intro/pictures.html

Actually, I tried to do this by looking at the examples here. It seems to have worked. But there is a problem.

Screenshot_3

The panel I added does not contain the textblock part, but it works as if it includes the textblock part. This can be seen when focusing or looking at marriage links.

When delete the textblock part, it looks like it should. But i need textblock.

Screenshot_4

myDiagram.nodeTemplateMap.add(
      "M", // male
      $(
        go.Node,
        "Vertical",
        {
          locationSpot: go.Spot.Center,
          locationObjectName: "ICON",
          selectionObjectName: "ICON",
        },
        new go.Binding("opacity", "hide", (h) => (h ? 0 : 1)),
        new go.Binding("pickable", "hide", (h) => !h),

        $(
          go.Panel,
          "Spot",
          $(go.Shape, "Square", { width: 40, strokeWidth: 2, fill: "black" }),
          $(
            go.Panel,
            {
              itemTemplate: $(
                go.Panel,
                $(
                  go.Shape,
                  { stroke: null, strokeWidth: 0 },
                  new go.Binding("fill", "", attrFill),
                  new go.Binding("geometry", "", maleGeometry)
                )
              ),
              margin: 1,
            },
            new go.Binding("itemArray", "a")
          ),
          $(
            go.Picture,
            "https://t3.ftcdn.net/jpg/03/51/39/36/360_F_351393603_yTkY09jjL7mg39Wnzv2bdrmEDv1rbvFQ.jpg",
            {
              width: 40,
              height: 40,
            }
          ),
          $(
            go.Panel,
            "Spot",
            { isClipping: true },
            $(go.Shape, "Square", { width: 40, strokeWidth: 2 })
          )
        ),
        $(
          go.TextBlock,
          {
            font: "16px sans-serif",
            textAlign: "center",
            maxSize: new go.Size(80, NaN),
          },
          new go.Binding("text", "n")
        )
      )
    );

I tried to adapt the codes you suggested, but I kept getting errors. I think I didn’t understand what you wanted to say correctly, sorry.

8

Do you still have this initialization of your Diagram?

            // when a node is selected, draw a big yellow circle behind it
            nodeSelectionAdornmentTemplate:
              $(go.Adornment, "Auto",
                { layerName: "Grid" },  // the predefined layer that is behind everything else
                $(go.Shape, "Circle", { fill: "#c1cee3", stroke: null }),
                $(go.Placeholder, { margin: 2 })
              ),

Or something like it? Notice that the yellow Circle surrounds the Placeholder. The Placeholder will have its location and size determined by the adorned node’s Node.selectionObject, which is determined by the Node.selectionObjectName of your template. That seems to be “ICON”, as is the Node.locationObjectName. Yet your node template doesn’t seem to have any object named “ICON”, so it defaults to the whole node, which includes that TextBlock that you want to exclude.

1 Like
9

Yes, it was fixed when defined the “ICON” name you mentioned. Thank you Walter.