Add arrow to genogram to point to 'proband'

GoJS
1

I’m trying to add an arrow to point to the proband in the genorgram example: Genogram.

I’m having a hard time adding the template for the arrow:

myDiagram.nodeTemplate.add("probandArrow",
            $(go.Node, "Vertical", {
                locationSpot: go.Spot.Center,
                locationObjectName: "ICON",
                movable:false
            }),
            $(go.Panel, {
                    name: "ICON"
                },
                $(go.Shape, "Arrow", {
                    width: 25,
                    height: 15,
                    strokeWidth: 1,
                    fill: "black",
                    portId: "",
                    angle: 330
                })
        ));

I’m getting the error: “Panel.add:element value is not an instance of GraphObject: probandArrow”. Once I get the template in there I still don’t understand how to position it slightly below and to the left of the proband.

Any help is appreciated!

Thanks!

2

There is already a custom selection adornment template on the diagram in the Genogram sample. You can replace the big fuzzy yellow circle with a black arrow, if you like:

    nodeSelectionAdornmentTemplate:
        $(go.Adornment, "Spot",
            { layerName: "Grid" },  // the predefined layer that is behind everything else
            $(go.Placeholder),
            $(go.Shape, "Arrow",
              {
                width: 25, height: 15, angle: 315,
                alignment: new go.Spot(0.15, 0.6),
                alignmentFocus: go.Spot.TopRight
              })
        ),
3

Thanks! I can get the arrow in there. However, I don’t want it to be onclick but rather statically placed next to only the proband. I have this adornmenttmeplate for onclick which is what I’d like to keep:

 nodeSelectionAdornmentTemplate: $(go.Adornment, "Auto", {
                    layerName: "Grid"
                }, // the predefined layer that is behind everything else
                $(go.Shape, "RoundedRectangle", {
                    fill: "transparent",
                    stroke: 'gray',
                    strokeWidth: 1,
                    strokeDashArray: [5, 5]
                }),
                $(go.Placeholder)
            )
4

OK, instead of tying the appearance of the arrow to selection, just add an instance of a Part containing just an “Arrow” Shape at the appropriate position relative to the Node that you want to point out.

5

Ok, I’ve tried to add another template like so to include the arrow:

myDiagram.nodeTemplateMap.add("FP", // female proband
        $(go.Node, "Vertical", {
                locationSpot: go.Spot.Center,
                locationObjectName: "ICON",
                movable:false
            },
            $(go.Panel, {
                    name: "ICON"
                },
                $(go.Shape, "Ellipse", {
                    width: 40,
                    height: 40,
                    strokeWidth: 2,
                    fill: "white",
                    portId: ""
                }),
                $(go.Panel, {
                        itemTemplate: $(go.Panel,
                            $(go.Shape, {
                                    stroke: null,
                                    strokeWidth: 0
                                },
                                new go.Binding("fill", "", attrFill),
                                new go.Binding("geometry", "", femaleGeometry))
                        ),
                        margin: 1

                    },
                    new go.Binding("itemArray", "a")
                )
            ),
            $(go.TextBlock, {
                    textAlign: "center",
                    maxSize: new go.Size(80, NaN)
                },
                new go.Binding("text", "n")),
             $(go.Panel, {
                    name: "ICON"
                },
                $(go.Shape, "Arrow", {
                    width: 30,
                    height: 10,
                    strokeWidth: 1,
                    fill: "black",
                    portId: "",
                    angle : 330,
                    margin: new go.Margin(0, 0, 0, 0)
                }))
        ));

But it screws up my positioning when I change the margins in an attempt to get the arrow to the bottom left of the ellipse.

Are you saying not to use a template? I can make an arrow just fine:

var node2 = new go.Node(go.Panel.Auto);
var shape2 = new go.Shape();
shape2.figure = "Arrow";
shape2.fill = "black";
shape2.width = 30;
shape2.height = 15;
shape2.angle = 330;
node2.add(shape2);
diagram.add(node2);

I’m just not sure how to position it relative to the Node I want to point out. (it would have a key value of FP or MP…female proband/male proband).

6

Sorry, I should have been more clear – no, don’t use a template.

Maybe in an “InitialLayoutCompleted” DiagramEvent listener when setting up the Diagram:

  "InitialLayoutCompleted": function(e) {
      var node = e.diagram.findNodeForKey(...);
      if (node === null) return;
      e.diagram.add($(go.Part,
            {
              position: node.getDocumentPoint(new go.Spot(0.15, 0.6)).offset(-25, 0),
              pickable: false, selectable: false
            },
            $(go.Shape, "Arrow", { width: 25, height: 15, angle: 315 })
          ));
  }

Pardon any typos.

7

Thank you! Here’s what I ended up with:

myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
  var node = e.diagram.findNodeForKey(1);
  if (node === null) return;
  e.diagram.add($(go.Part,
        {
          position: node.getDocumentPoint(new go.Spot(0.15, 0.6)).offset(-25, 0),
          pickable: false, selectable: false
        },
        $(go.Shape, "Arrow", { width: 25, height: 15, angle: 315 })
      ));
  });
8

DOH! I spoke too soon. For some reason it’s offsetting all the links now:

2016-03-01_1300.png730×452 20.3 KB

9

There must be something else wrong with how the diagram is constructed.

That arrow Part is completely independent of everything else, so commenting out that code should have no other effect.

10

Can confirm. I just added the arrow to your genogram and it works great.

I’m trying to find the modifications I’ve made to cause this issue. I think it might have something to do with my nodisplaynodes options but I can’t pin it down.

Do you mind taking a look at the build script?

11

FYI…looks like that codepen is behaving a little differently. It’s centering horizontally but not vertically. Same code…only difference is the width of the container.

12

I tried your CodePen in three different browsers, and both the arrow Part and the custom selection adornment seem to work well.

13

The arrow is working great. It just throws off the positioning on the marriages. I’ve highlighted them in yellow.

14

Another weird thing. If I export it as an images the alignment is dead on.

15

Besides the arrow for the proband, which you have already said did not matter, what changes have you made from the genogram sample?

16

Got it working. Did the following:

  1. Updated gojs to 1.5
  2. Copied the prototype overrides over from your sample.

Looking through your prototypes to see what differences were made.

Thanks!

17

That’s interesting. My guess is that there was some sort of animation bug in 1.4 that had been fixed in 1.5. Thanks for telling us about that.