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.
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
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
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.
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?
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…