Problem while creating Self Loops

GoJS
1

I have been trying to create self Loops in GoJS but it is not working. I cannot figure out what exactly the problem is.

graph.diagram(go.Shape, "Circle", { fill: "transparent", stroke: null, // this is changed to "white" in the showPorts function desiredSize: new go.Size(10, 10), alignment: spot, alignmentFocus: spot, // align the port on the main Shape portId: name, // declare this object to be a "port" fromSpot: spot, toSpot: spot, // declare where links may connect at this port fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here cursor: "pointer", // show a different cursor to indicate potential link point fromLinkable: true, toLinkable: true, fromLinkableDuplicates: true, toLinkableDuplicates: true, fromLinkableSelfNode: true, toLinkableSelfNode: true });
This is the port template of Node.

` this.graph.nodeTemplateMap.add(“Default”, this.diagram(go.Node, “Auto”, nodeStyle,
new go.Binding(“location”, “loc”, go.Point.parse),
this.diagram(go.Shape, “RoundedRectangle”,
{
parameter1: 20, // the corner has a large radius
fill: $(go.Brush, “Linear”, { 0: “rgb(254, 201, 0)”, 1: “rgb(254, 162, 0)” }),
stroke: null,
portId: “”, // this Shape is the Node’s port, not the whole Node
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: “pointer”
},
new go.Binding(“figure”, “figure”),
new go.Binding(“fill”, “background”),
new go.Binding(“stroke”, “stroke”),
new go.Binding(“angle”, “angle”)),

                  this.diagram(go.TextBlock,
                    {
                        font: "bold 11pt Helvetica, Arial, sans-serif",
                        margin: 10,
                        maxSize: new go.Size(160, NaN),
                        wrap: go.TextBlock.WrapFit,
                        editable: false
                    },
                    new go.Binding("text", "text"),
                    new go.Binding("stroke", "color"),
                    new go.Binding("touchPointId", "tpId")),

                      this.diagram("Button",
                            {
                                alignment: go.Spot.TopRight,
                                "_buttonFillNormal": "#F7F7F7",
                                "_buttonStrokeNormal": "#808080",
                                "_buttonFillOver": "#F7F7F7",
                                "_buttonStrokeOver": "#808080"
                            },
            this.diagram(go.Shape, "XLine", { width: 5, height: 5, stroke: "#ff0000" }),
                   { click: deleteSegment }),
                    makePort(this, "T", go.Spot.Top, false, true),
                    makePort(this, "B", go.Spot.Bottom, true, false)
              ));`

And its the Node Template. Both of them have appropriate settings, but still I am unable to create a Self loop on fly. Can you help me on this.

2

I assume you have started with the Flow Chart sample.

The only change I made is add the port permission properties in the makePort function just as you did:

                  cursor: "pointer",  // show a different cursor to indicate potential link point
                  fromLinkable: true, toLinkable: true,
                  fromLinkableDuplicates: true, toLinkableDuplicates: true,
                  fromLinkableSelfNode: true, toLinkableSelfNode: true

I find that everything works as before but now I can draw links from a port on a node to a port on the same node.

Did you make any other changes to the Flow Chart sample?

3

I did, but somehow it didnt work. I have placed this to every node, but still it is not working. Can you check what I am missing here.

I have created a dummy page of the problem :
http://appseconnect.azurewebsites.net/Account/Workflow

The javascripts files are :
http://appseconnect.azurewebsites.net/Content/themes30/Custom/Script/workflow.js
http://appseconnect.azurewebsites.net/Scripts/app/Workflow.js

You can add a Touchpoint from Pallete and see. The nodes inside the Group (marked in arrows) should have self loops.

ImageCapture.PNG1596×495 52.5 KB

Please help me, I am stuck.

4

This line in makePort is commented out:

 //fromLinkableSelfNode: true, toLinkableSelfNode: true

A comment: you should read GoJS Transactions -- Northwoods Software. All model changes should occur within a transaction, but not a separate transaction for each individual change! Each of your HTML event handlers should start a transaction, make all of the desired changes, and then commit (or roll back) the transaction. Each of the GoJS event handlers and listeners documents whether a transaction is already ongoing, hence many handlers don’t need to start/commit any transactions.

5

Ok thank you for notifying about the transaction related problem in code. I will modify it accordingly.

But strangely enough, regarding the problem with self loops I did actually enable that code and it didn’t worked. I have now enabled the code and published. Can you check now please.

6

We really cannot be responsible for debugging all of our customer’s apps.

I did check to make sure that modifying the Flow Chart sample worked in the way that I think we both expect. That was to add this line of initializations in makePort:

    fromLinkableSelfNode: true, toLinkableSelfNode: true,

And to make sure that the presence of Groups did not inhibit users from drawing links between two ports on one node inside a group, I also tried adding this template:

    myDiagram.groupTemplate =
      $(go.Group, "Spot",
        { avoidable: false },
        $(go.Panel, "Auto",
          $(go.Shape, { fill: "transparent" }),
          $(go.Placeholder, { padding: 25 })
        ),
        $(go.Shape, "Circle", {
          alignment: go.Spot.Top, width: 10, portId: "T",
          fromSpot: go.Spot.Bottom, fromLinkable: true, fromLinkableSelfNode: true,
          toSpot: go.Spot.Top, toLinkable: true, toLinkableSelfNode: true
        }),
        $(go.Shape, "Circle", {
          alignment: go.Spot.Bottom, width: 10, portId: "B",
          fromSpot: go.Spot.Bottom, fromLinkable: true, fromLinkableSelfNode: true,
          toSpot: go.Spot.Top, toLinkable: true, toLinkableSelfNode: true
        })
      );

To enable creating groups interactively, I added this line to the initialization of the Diagram:

          "commandHandler.archetypeGroupData": { isGroup: true },

This also allowed drawing a link between the two ports of the group itself, as well as a link from a port on a group to or from a port on a node inside the group.

7

Thank you so much. I think I have fixed the issue by disabling the line :

this.graph.validCycle = go.Diagram.CycleDestinationTree;

But with this the diagram will not maintain tree structure. Any alternative to this such that the diagram does not support closed looping ?

8

I guess you did not start from the FlowChart sample. What you want people to draw is definitely not tree-structured.

I think you will need to implement your own LinkingTool.linkValidation predicate.

9

Thank you walter, the conversation did help me fix the issue.