When we click the link to change the background color of the target node

GoJS
1

Hi walter,
How to change the background color of the target node when we the link. From action node pointing to two node means when we click any one link we need to change the background color of target node. Please help .

when we click the alpha (no) link we need to change the background color of beta.

image

2

Have you read GoJS Highlighting -- Northwoods Software ? It does not have an example of exactly the situation that you want, it has similar examples.

3

Ok walter Thanks lot for quick information. In the highlighting information page can you pls tell me how to change the background color of node .In this they are change stroke color. But i need background color ? Can you please tell me?

4

Try setting or binding the Shape.fill property.
https://gojs.net/latest/intro/shapes.html

5

Thanks for the reply walter. I have tried three different ways to set fill color of the shape but its not working. Pls help me on below i have added code on myDiagram.linkTemplate .

click: function (e, link) {

                        e.diagram.clearHighlighteds();
                        if (link.fromNode) link.fromNode.isHighlighted = true;
                        if (link.toNode) link.toNode.isHighlighted = true;
                        e.diagram.commandHandler.scrollToPart(scrollToSource ? link.fromNode : link.toNode);
                        scrollToSource = !scrollToSource;

// Step 1 not working start //

var model = myDiagram.model;
myDiagram.startTransaction();
// Here I am passing the target node key value to change the color
var data = model.nodeDataArray[3];
var newcolor = “Black”;
model.setDataProperty(data, “fill”, newcolor);
model.setDataProperty(data, “color”, newcolor);myDiagram.commitTransaction(“changed shared color”);

// Step 1 not working end //

// Step 2 not working start //
var node = myDiagram.findNodeForKey(“3”);
var model = myDiagram.model;
model.startTransaction(“change color”);
model.setDataProperty(node.data, “fill”, “green”);
model.commitTransaction(“change color”);
// Step 2 not working end //

// Step 3 not working start //

                        myDiagram.startTransaction("change fill color");
                       var node = myDiagram.findNodeForKey("3");
                        var shape = node.findObject("PANEL");
                        shape.fill = "green";
                        myDiagram.commitTransaction("change fill color");
                        var node = myDiagram.findNodeForKey("2");
                        node.findLinksOutOf().each(function (link) {
                         link.findObject("SHAPE").stroke = "green";
                        });

// Step 3 not working end //

                    }

Or any other we can achieve this functionality ???

Currently i am working flowchart samples

myDiagram.nodeTemplateMap.add("", // the default category
$$(go.Node, “Table”, nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$$(go.Panel, “Auto”,
$$(go.Shape, “Rectangle”,
{ fill: “#005691”, strokeWidth: 2, cursor: “pointer” },
new go.Binding(“figure”, “figure”),
new go.Binding(“stroke”, “isHighlighted”, function (h) { return h ? “red” : “black”; }).ofObject(),
new go.Binding(“strokeWidth”, “isHighlighted”, function (h) { return h ? 4 : 1; }).ofObject()

                    ),
                    $$(go.TextBlock, textStyle(),
                        {
                            margin: 8,
                            maxSize: new go.Size(160, NaN),
                            wrap: go.TextBlock.WrapFit,
                            editable: false,
                            cursor: "pointer"
                        },

new go.Binding(“text”).makeTwoWay(),
{
},
)
),
// four named ports, one on each side:
makePort(“T”, go.Spot.Top, go.Spot.TopSide, false, true),
makePort(“L”, go.Spot.Left, go.Spot.LeftSide, true, true),
makePort(“R”, go.Spot.Right, go.Spot.RightSide, true, true),
makePort(“B”, go.Spot.Bottom, go.Spot.BottomSide, true, false)
));

Please refer my shapes are inside in the panel.

6 
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center  // for v1.*
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "darkslategray", portId: "" },
          new go.Binding("fill", "isHighlighted", function(h) { return h ? "red" : "darkslategray"; }).ofObject()),
        $(go.TextBlock,
          { margin: 8, stroke: "white" },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        {
          click: function(e, link) {
            e.diagram.commit(function(diag) {
              diag.clearHighlighteds();
              link.toNode.isHighlighted = true;
            }, "highlight toNode")
          }
        },
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha" },
      { key: 2, text: "Beta" },
      { key: 3, text: "Gamma" }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 }
    ]);
  }
1 Like
7

Thank you walter. It is working fine thanks lot for your effort to complete my requirement.