Add image as border background for panel or shape

GoJS
1

I want to add an image as border of the panel/shape. Is it possible? Something like the right side stacked border.

Also I want to add an image at the actual branch, mean to say at the intersection of the branch links, something like following.

2

Sure, use a Picture. See how you can compose GraphObjects in Panels at GoJS Panels -- Northwoods Software, GoJS Table Panels -- Northwoods Software, and GoJS Nodes -- Northwoods Software.

For your other issue, could you be more specific about the potential cases and non-cases where you’d want that image?

3

As you can see the above card image, with title, image and description which is in vertical panel, there is other type in which it has multiple cards as which i have to represent as stacked cards using right side stack border eg. multiple drop shadows.

and for branch icon i have implemented with picture, but I want it ad intersection of link lines refer below

4

I’m sorry, but since you didn’t provide a screenshot, it’s still unclear to me what you want for the first issue. Did you want to show multiple images in a stack, or multiple panels of text/picture/text in a stack, or something else? If there will always be a fixed number, you can just copy the GraphObjects in your Panel. If you want to show a variable number of (arbitrarily complex) objects, take a look at GoJS Item Arrays-- Northwoods Software.

There’s no general mechanism to put arbitrary objects at each intersection of links – the closest is the jump-over, as shown at GoJS Links -- Northwoods Software. There is also this sample: Multi-Arrow Links, which draws arrowheads at the end of each segment.

But I’m suspecting that neither is what you are asking for, since technically there is no intersection of links at the point at the end of the red arrow. In your screenshot aren’t there three or more links coming out of the “I1” node, and they happen to be branching out?

So I’m wondering if it would be acceptable to show your preferred white branch indicator whenever there is more than one link coming out of a node, at a fixed distance below the node. If so, that could be added to the node template, at a fixed distance below the node, and only made visible when there is more than one link coming out of the node.

5

Just indicator of stack, it can be multiple panel/image/text.

With stack

Without stack

And for branch icon whatever you are saying is what I am doing currently, its part of node after some distance. But you know UI Designer :D, they want in intersection.

6

Oh, that’s what you mean. I’ll see if I can create an example for you.

OK, then another possibility is to have every Link have an extra label which is a Panel holding what you want to show at the branch point. I guess you already have this panel defined. But you’d have it be not GraphObject.visible by default.

Then whenever a link is added to the node (you could implement Node.linkConnected and Node.linkDisconnected event handlers) that comes out of the node and forms a branch point, you can make that label visible and position it at the corresponding point. You can look at all of the node.findLinksOutOf() and examine each Link.points list. I suspect you want the index of the last point where two routes are the same. Then just set the GraphObject.segmentIndex of the label to that index.

Since n links can have at most n-1 branch points, there will always be one branch label that will always be not-visible, belonging to the link that goes furthest in common with any other link from that node.

7

Try this:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { fill: "pink", strokeWidth: 0, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight }),
        $(go.Panel, "Auto",
          { margin: new go.Margin(0, 5, 0, 0)},
          $(go.Shape, "RoundedRectangle", { fill: "cyan", strokeWidth: 0, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight }),
          $(go.Panel, "Auto",
            { margin: new go.Margin(0, 5, 0, 0) },
            $(go.Shape, "RoundedRectangle", { fill: "white", strokeWidth: 0 }),
            $(go.Panel, "Vertical",
              { maxSize: new go.Size(80, NaN) },
              $(go.TextBlock, "Card"),
              $(go.Picture, "images/50x40.png", { width: 50, height: 40 }),
              $(go.TextBlock, "some descriptive text")
            )
          )
        )
      );

This results in something like:

Obviously I used cyan and pink to make it clear which Shape is which.

8

Cool, I will try this out thanks.