Links are not showing in the diagram

GoJS
1

Hi,
I am using your JS and it is licensed version.But I am facing some issue regarding the links in the diagram.When I am drawing the links between two nodes it is not showing in the diagram .But the links data are present in the linkdataarray object in the model.My final model is appearing linke this.

{ “class”: “go.GraphLinksModel”,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: [
{“appId”:“f89e1c6f-930f-49c5-a6ca-4c0d86d46d58”, “text”:“Acumatica”, “category”:“Default”, “type”:“app”, “imagePath”:“https://www.appseconnect.com/wp-content/uploads/2018/01/SAp-business-one.png”, “key”:“86798485-fce7-4e68-ae28-e1c6953e8da1”, “loc”:“280 -180”, “nodedata”:{“Label”:“dd”, “ExecutionType”:“get”, “AppId”:“c7bb36c4-4ee9-49bc-bdf7-12112d14668d”, “AppVersionid”:“52”, “AppEntityId”:“8a5fc46f-168b-473c-845a-610cab7f491a”, “AppEntityActionId”:“668145a0-35a1-413b-922a-ed402ebab7d5”}},
{“appId”:“a9f5369d-0921-4618-837c-fedb43af05ee”, “text”:“Amazon”, “category”:“Default”, “type”:“app”, “imagePath”:“https://www.appseconnect.com/wp-content/uploads/2018/01/SAp-business-one.png”, “key”:“217f51e3-733d-49d6-b408-7c66aea3f3d2”, “loc”:“530 -20”, “nodedata”:{“Label”:“”, “ExecutionType”:“”, “AppId”:“”, “AppVersionid”:null, “AppEntityId”:null, “AppEntityActionId”:null}}
],
“linkDataArray”: [ {“from”:“86798485-fce7-4e68-ae28-e1c6953e8da1”, “to”:“217f51e3-733d-49d6-b408-7c66aea3f3d2”, “fromPort”:“B”, “toPort”:“T”, “text”:2, “ExecutionOrder”:1, “key”:“e573167f-105c-41af-aaca-d019abf0156c”} ]}

my link template is this

this.diagram(go.Link,
{
routing: go.Link.Orthogonal, // may be either Orthogonal or AvoidsNodes
curve: go.Link.JumpOver,
corner: 5, toShortLength: 4,
relinkableFrom: false,
relinkableTo: false,
reshapable: true,
resegmentable: true,
selectionAdornmentTemplate: this.diagram(go.Adornment,
this.diagram(go.Shape,
{ isPanelMain: true, stroke: “red”, strokeWidth: 1 }),
this.diagram(go.Shape,
{ fromArrow: “PentagonArrow”, fill: “red”, stroke: null, scale: 1 }),
this.diagram(go.Shape,
{ toArrow: “Standard”, fill: “red”, stroke: null, scale: 1 })
) // end Adornment
},
new go.Binding(“points”).makeTwoWay(),

    this.diagram(go.Shape,  // the link path shape
        { isPanelMain: true, stroke: "gray", strokeWidth: 2 },
        new go.Binding("stroke", "statusfill")),
    this.diagram(go.Shape,  // the arrowhead
        { fromArrow: "PentagonArrow", stroke: null, fill: "gray" },
        new go.Binding("fill", "statusfill")),
    this.diagram(go.Shape,  // the arrowhead
        { toArrow: "standard", stroke: null, fill: "gray" },
        new go.Binding("fill", "statusfill")),
    this.diagram(go.Panel, "Auto",  // the link label, normally not visible
        { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
        new go.Binding("visible", "visible").makeTwoWay(),
        this.diagram(go.Shape, "RoundedRectangle",  // the label shape
            { fill: "#F8F8F8", stroke: null }),
        this.diagram(go.TextBlock, new go.Binding("text", "typetext"),  // the label
            {
                textAlign: "center",
                font: "10pt helvetica, arial, sans-serif",
                stroke: "#333333",
                editable: false
            }
        )
    )

);

And my diagram is looking like this

image
image1225×580 18.9 KB

2

I just tried your code, unmodified, and the link is seen as one would expect.

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          { "undoManager.isEnabled": true });

    // NOTE: I do not have your node template,
    // but that should not matter if it is a normal node template
    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, "Auto",
          $(go.Shape, { fill: "white" }),
          $(go.TextBlock,
            { margin: 8 },
            new go.Binding("text"))
        )
      );

    myDiagram.linkTemplate =
      $(go.Link,
        {
          routing: go.Link.Orthogonal, // may be either Orthogonal or AvoidsNodes
          curve: go.Link.JumpOver,
          corner: 5, toShortLength: 4,
          relinkableFrom: false,
          relinkableTo: false,
          reshapable: true,
          resegmentable: true,
          selectionAdornmentTemplate: $(go.Adornment,
            $(go.Shape,
              { isPanelMain: true, stroke: "red", strokeWidth: 1 }),
            $(go.Shape,
              { fromArrow: "PentagonArrow", fill: "red", stroke: null, scale: 1 }),
            $(go.Shape,
              { toArrow: "Standard", fill: "red", stroke: null, scale: 1 })
            ) // end Adornment
        },
        new go.Binding("points").makeTwoWay(),

        $(go.Shape,  // the link path shape
          { isPanelMain: true, stroke: "gray", strokeWidth: 2 },
          new go.Binding("stroke", "statusfill")),
        $(go.Shape,  // the arrowhead
          { fromArrow: "PentagonArrow", stroke: null, fill: "gray" },
          new go.Binding("fill", "statusfill")),
        $(go.Shape,  // the arrowhead
          { toArrow: "standard", stroke: null, fill: "gray" },
          new go.Binding("fill", "statusfill")),
        $(go.Panel, "Auto",  // the link label, normally not visible
          { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
          new go.Binding("visible", "visible").makeTwoWay(),
          $(go.Shape, "RoundedRectangle",  // the label shape
              { fill: "#F8F8F8", stroke: null }),
          $(go.TextBlock, new go.Binding("text", "typetext"),  // the label
              {
                  textAlign: "center",
                  font: "10pt helvetica, arial, sans-serif",
                  stroke: "#333333",
                  editable: false
              })
        )
      );

    myDiagram.model = $(go.GraphLinksModel,
      {
        "linkFromPortIdProperty": "fromPort",
        "linkToPortIdProperty": "toPort",
        "nodeDataArray": [
          {"appId":"f89e1c6f-930f-49c5-a6ca-4c0d86d46d58", "text":"Acumatica", "category":"Default", "type":"app", "imagePath":"https://www.appseconnect.com/wp-content/uploads/2018/01/SAp-business-one.png", "key":"86798485-fce7-4e68-ae28-e1c6953e8da1", "loc":"280 -180", "nodedata":{"Label":"dd", "ExecutionType":"get", "AppId":"c7bb36c4-4ee9-49bc-bdf7-12112d14668d", "AppVersionid":"52", "AppEntityId":"8a5fc46f-168b-473c-845a-610cab7f491a", "AppEntityActionId":"668145a0-35a1-413b-922a-ed402ebab7d5"}},
          {"appId":"a9f5369d-0921-4618-837c-fedb43af05ee", "text":"Amazon", "category":"Default", "type":"app", "imagePath":"https://www.appseconnect.com/wp-content/uploads/2018/01/SAp-business-one.png", "key":"217f51e3-733d-49d6-b408-7c66aea3f3d2", "loc":"530 -20", "nodedata":{"Label":"", "ExecutionType":"", "AppId":"", "AppVersionid":null, "AppEntityId":null, "AppEntityActionId":null}}
        ],
        "linkDataArray": [
          {"from":"86798485-fce7-4e68-ae28-e1c6953e8da1", "to":"217f51e3-733d-49d6-b408-7c66aea3f3d2", "fromPort":"B", "toPort":"T", "text":2, "ExecutionOrder":1, "key":"e573167f-105c-41af-aaca-d019abf0156c"}
        ]
      });
  }

image

3

It is loading when I am loading the data with the same model but it is disappearing at the time of creation though the node data are showing in the model.

4

I have recorded the video please see it .

5

Well, do you have a “LinkDrawn” DiagramEvent listener? If so, what does it do?
Or do you have any other DiagramEvent listeners or any event handlers on any GraphObject? Or have you customized any linking tools or any commands?

6

no I donot have any code in the linkdraw listener.Customizing linking tool means what?

These are my code related to links

this.graph = this.diagram(go.Diagram, obj.elementId,
{
initialContentAlignment: go.Spot.Left,
initialAutoScale: go.Diagram.Uniform,
allowDrop: true,
allowCopy: false,
allowLink: true,
isReadOnly: false,
allowDelete: false,
//LinkDrawn: showLinkLabel, // this DiagramEvent listener is defined below
//LinkRelinked: showLinkLabel,
//mouseDrop: function () { if (this.currentGroup) delete this.currentGroup; },
“animationManager.isEnabled”: false,
“undoManager.isEnabled”: true,
“toolManager.mouseWheelBehavior”: go.ToolManager.WheelNone,
//“linkingTool.linkValidation”: checkLoops,
//“relinkingTool.linkValidation”: checkLoops,
“commandHandler.archetypeGroupData”: { isGroup: true }
});

model.linkFromPortIdProperty = “fromPort”;
model.linkToPortIdProperty = “toPort”;

this.graph.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
this.graph.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

7

Those customizations look innocuous to me. I added your Diagram initializations to my sample from above, along with this updated node template, and everything looks and works well.

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, "Auto",
          $(go.Shape, { fill: "white" }),
          $(go.Shape,
            { fill: "transparent", strokeWidth: 0, portId: "T",
              fromSpot: go.Spot.TopSide, toSpot: go.Spot.TopSide,
              toLinkable: true,
              width: 50, height: 2, alignment: go.Spot.Top
            }),
          $(go.Shape,
            {
              fill: "transparent", strokeWidth: 0, portId: "B", cursor: "pointer",
              fromSpot: go.Spot.BottomSide, toSpot: go.Spot.BottomSide,
              fromLinkable: true,
              width: 50, height: 8, alignment: go.Spot.Bottom
            }),
          $(go.TextBlock,
            { margin: 8 },
            new go.Binding("text"))
        )
      );