Tootip in GoJs for LinkLabelOnPathDragging

@kumargaurav845 wrote:

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.

Picture1.png988x389 15.6 KB

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" },

        ]
            );

    }

Posts: 3

Participants: 2

Read full topic