Creating a junction on link is not working while loading the diagram

Hi,
I have created the junction(mean node) on the link its working fine but when I am loading the diagram getting issue.
it’s not attachable with the link while moving the other node it is not moving.

image

I have added this._model.linkLabelKeysProperty = “labelKeys”;
while loading do I need to add any property?

Thank You

Hi ,
can some one help me regarding this issue?

Thank You

We are located near Boston Massachusetts US, time zone UTC-5. And it’s a Saturday.

Does the link data object connecting Q1 and Q2 have a “labelKeys” property whose value is an Array holding the keys of those two nodes that are rendered as small black dots?

Hi,
Please have a look what I have done
link data object I am having below object
image

I have initialize this._model.linkLabelKeysProperty = “labelKeys”;

and while loading the diagram what should I write
this is I have

return goMake(GraphLinksModel,

** {**

** linkFromPortIdProperty: “fromPort”,**

** linkToPortIdProperty: “toPort”,**

** nodeDataArray: this._nodeDataArray,**

** linkDataArray: this._linkDataArray**

** });**

what should I add while return the object.

Yes I have added

I recommend that you set linkLabelKeysProperty earlier, so that it is shown in the toJson output.

Hi Walter ,
Yes I have added linkLabelKeysProperty earlier
private initModel() {
this._model = new go.GraphLinksModel([], [],);
this._model.linkFromPortIdProperty = “fromPort”;
this._model.linkToPortIdProperty = “toPort”;
this.model = this._model;
this._model.linkLabelKeysProperty = “labelKeys”;
}

and it is showing me my object below
image

see labelKeys in my object.

below object I am returning back
return goMake(GraphLinksModel,
{
linkFromPortIdProperty: “fromPort”,
linkToPortIdProperty: “toPort”,
nodeDataArray: this.nodeDataArray,
linkDataArray: this.linkDataArray
});

could you help me here… do we have any example in GoJs?

Set it before setting this.model.

And you must set it whenever you create a model.

https://gojs.net/latest/samples/linksToLinks.html

this one I have tried but didn’t help
private initModel() {
this._model = new go.GraphLinksModel([], [],);
this._model.linkFromPortIdProperty = “fromPort”;
this._model.linkToPortIdProperty = “toPort”;
this._model.linkLabelKeysProperty = “labelKeys”;
this.model = this._model;
}

– the second point while I will return the graphLinksModel I need to set linkLabelKeysProperty in the below function

public getGraphicsLinkModel(): GraphLinksModel {
let goMake = GraphObject.make;
return goMake(GraphLinksModel,
{
linkFromPortIdProperty: “fromPort”,
linkToPortIdProperty: “toPort”,
linkLabelKeysProperty: “labelKeys”,
nodeDataArray: this._nodeDataArray,
linkDataArray: this._linkDataArray,
});
}

If I am doing like this then it is considering only one node per link .

Ah, progress. Your link data definitely has two nodes in its labelKeys Array. But maybe the two nodes are at the same location. How is their node template defined, and what is their data?

https://gojs.net/extras/electricalJunction.html

Ah Ah Thanks,
While returning the graphLinksModel I am setting linkLabelKeysProperty below

public getGraphicsLinkModel(): GraphLinksModel {
let goMake = GraphObject.make;
return goMake(GraphLinksModel,
{
linkFromPortIdProperty: “fromPort”,
linkToPortIdProperty: “toPort”,
linkLabelKeysProperty: “labelKeys”,
nodeDataArray: this._nodeDataArray,
linkDataArray: this._linkDataArray,
});
}

is that correct ? but I think this is something hardcoded we passing labelKeys .
I have check the location both the node having different location.
I am creating two node on the link and after loading the diagram getting same location.

below node template

public getLinkLabelTemplate(): any {

    return this._goMake(Node,

        {

            layerName: "Foreground",  // always have link label nodes in front of Links

            background: "transparent",

            width: 12, height: 12,

            locationSpot: Spot.Center,

            movable: true,  // can't move junctions

            deletable: false,  // but becomes deletable when there's no connected link

            // only deletable when it's unconnected

            linkConnected: function (node, link, port) {

                node.deletable = false;

            },

            linkDisconnected: function (node, link, port) {

                node.deletable = (node.linksConnected.count === 0);

            },

            segmentOrientation: Link.OrientAlong,

            portSpreading: Node.SpreadingNone

        },

        new Binding("location", "location", Point.parse).makeTwoWay(Point.stringify),

        new Binding("segmentIndex").makeTwoWay(),  // remember where this label belongs on the link

        new Binding("segmentFraction").makeTwoWay(),

        this._goMake(Shape, "Circle",

            { // a junction node appears as just a small black circle

                position: new Point(3, 3),  // center the circle in the Node

                width: 6, height: 6,

                fill: "black", strokeWidth: 0,

                portId: "",

                fromLinkable: true, toLinkable: true, cursor: "pointer",

                fromSpot: Spot.Center, toSpot: Spot.Center

            })

    )

}

Thanks for the Help Walter,

the example you have provided in the link can you create more than one node on the link and load the diagram …
because If I am giving linkLabelKeysProperty=“labelKeys” I am facing issue with location. it is considered same location on the linkpoint node while loading the diagram

Hi,

private createJunction(e, link) {
        e.handled = true;
        e.diagram.startTransaction("Link Label");
        var label = { category: "LinkLabel", location: e.documentPoint }; // Create data for label node -- the junction Node

        e.diagram.model.addNodeData(label);
        var labelnode = e.diagram.findNodeForData(label); // Finds the created node from the NodeData
        this.attachJunction(link, labelnode, e.documentPoint);
        e.diagram.commitTransaction("Link Label");
    }

and below is my nodetemplate

public getLinkLabelTemplate(): any {
  return this._goMake(Node,
      {
          layerName: "Foreground",  // always have link label nodes in front of Links
          background: "transparent",
          width: 12, height: 12,
          locationSpot: Spot.Center,
          movable: true,  // can't move junctions
          deletable: false,  // but becomes deletable when there's no connected link
          // only deletable when it's unconnected
          linkConnected: function (node, link, port) {
              node.deletable = false;
          },
          linkDisconnected: function (node, link, port) {
              node.deletable = (node.linksConnected.count === 0);
          },
          segmentOrientation: Link.OrientAlong,
          portSpreading: Node.SpreadingNone
      },
      new Binding("location", "location", Point.parse).makeTwoWay(Point.stringify),
      new Binding("segmentIndex").makeTwoWay(),  // remember where this label belongs on the link
      new Binding("segmentFraction").makeTwoWay(),
      this._goMake(Shape, "Circle",
          { // a junction node appears as just a small black circle
              position: new Point(3, 3),  // center the circle in the Node
              width: 6, height: 6,
              fill: "black", strokeWidth: 0,
              portId: "",
              fromLinkable: true, toLinkable: true, cursor: "pointer",
              fromSpot: Spot.Center, toSpot: Spot.Center
          })
  )
}

while loading the diagram and rendering template getting same location.

Thank You

It seems your node template has bindings on both location and segmentIndex/segmentFraction. The segmentIndex/segmentFraction bindings are probably overriding your locations. Have you set segmentIndex and segmentFraction in your label node data?

You probably only need the either the location binding or the segmentIndex and segmentFraction bindings, not all three.

Thank You jhardy…