Hi I want to add tool tip in the link for LinkLabelOnPathDragging, I am able to achieve tool tip for the node but i am facing issue in adding tooltip for the link.
my requirement is like, it will show as follows when i hover on link,
From B ->C
Occurence:84
but i am able to show only the source node as shown in pic.
kindly let me know what changes i has to make for the tool tip.
PFB my code
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv", // the ID of the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
// install the LinkLabelDraggingTool as a "mouse move" tool
myDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelOnPathDraggingTool());
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse),
{ // when the user clicks on a Node, highlight all Links coming out of the node
// and all of the Nodes at the other ends of those Links.
click: function (e, node) { showConnections(node); } // defined below
},
$(go.Shape,
{
portId: "",
// fromLinkable: true,
fromSpot: go.Spot.AllSides,
// toLinkable: true,
toSpot: go.Spot.AllSides,
cursor: "pointer",
stroke: "black", strokeWidth: 2
},
new go.Binding("fill", "color"),
new go.Binding("stroke", "isHighlighted", function (h) { return h ? "red" : "black"; })
.ofObject()),
$(go.TextBlock,
{ margin: 10, font: "12pt sans-serif" },
new go.Binding("text", "key")),
/*
$(go.Shape, “RoundedRectangle”,
{ fill: “white” },
new go.Binding(“fill”, “color”)),
$(go.TextBlock, { margin: 5 },
new go.Binding("text", "key")),*/
{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "key"))
)
});
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes,
corner: 5,
// relinkableFrom: true,
// relinkableTo: true,
// reshapable: true,
// resegmentable: true
},
$(go.Shape,
{ isPanelMain: true, stroke: "black", strokeWidth: 2 },
// the Shape.stroke color depends on whether Link.isHighlighted is true
new go.Binding("stroke", "isHighlighted", function (h) { return h ? "red" : "#A9A9A9"; })
.ofObject()),
$(go.Shape, { toArrow: "OpenTriangle", stroke: "black", strokeWidth: 2 },
new go.Binding("stroke", "isHighlighted", function (h) { return h ? "red" : "#A9A9A9"; })
.ofObject()),
$(go.Panel, "Auto",
{ _isLinkLabel: true }, // marks this Panel as being a draggable label
$(go.Shape, { fill: "white" },
new go.Binding("stroke", "isHighlighted", function (h) { return h ? "red" : "#A9A9A9"; })
.ofObject()),
$(go.TextBlock, "?", { margin: 3 },
new go.Binding("stroke", "isHighlighted", function (h) { return h ? "red" : "#A9A9A9"; })
.ofObject(),
new go.Binding("text", "text")),
// remember any modified segment properties in the link data object
new go.Binding("segmentIndex").makeTwoWay(),
new go.Binding("segmentFraction").makeTwoWay()
),
{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "from"))
)
}
);
function mydiagramInfo(model) {
return "Model:\n" + model.nodeDataArray.length + " nodes, " +
model.linkDataArray.length + " links";
}
// mydiagram.toolTip =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#CCFFCC" }),
$(go.TextBlock, { margin: 4 },
// use a converter to display information about the mydiagram model
new go.Binding("text", "", mydiagramInfo))
);
function showConnections(node) {
// var myDiagram = node.myDiagram;
myDiagram.startTransaction("highlight");
// remove any previous highlighting
myDiagram.clearHighlighteds();
// for each Link coming out of the Node, set Link.isHighlighted
node.findLinksOutOf().each(function (l) { l.isHighlighted = true; });
// for each Node destination for the Node, set Node.isHighlighted
node.findNodesOutOf().each(function (n) { n.isHighlighted = true; });
myDiagram.commitTransaction("highlight");
}
// when the user clicks on the background of the myDiagram, remove all highlighting
myDiagram.click = function (e) {
myDiagram.startTransaction("no highlighteds");
myDiagram.clearHighlighteds();
myDiagram.commitTransaction("no highlighteds");
};
// create a few nodes and links
myDiagram.model = new go.GraphLinksModel([
{ key: “A”, color: “#5DADE2”, loc: “500 0” },
{ key: “B”, color: “orange”, loc: “90 50” },
{ key: “C”, color: “lightgreen”, loc: “500 100” },
{ key: “D”, color: “grey”, loc: “590 50” }
], [
{ from: “A”, to: “B”, text: “3” },
{ from: “B”, to: “C”, text: “84” },
{ from: “B”, to: “D”, text: “2” },
]
);
}