I have groups with nodes.
There is a connection between nodes from different groups.
Problem: Lets suppose, node x from group B is connected to group A-s y. {from:x to:y}. If I open group A it does not shows y node, but I want this node to be there… If I open B-s x and pressed expand button to connect y and open A, y will be there…
I want all groups to have it’s nodes regardless node connections to other nodes.
Could you please help me?
I’m not sure I understand the issue you’re describing. In this example, the link acts as I would expect:
For more detailed instructions: I have node x with expanderbutton and whenever I press expanderbutton y node is appearing in group A and after second click it dissapears … I want y node to be in group A without any affects of x… I tried making link between {from: A to: y} but every time I press expanding or collapsing it changes and I can’t understand how links work.
Could you provide your code and some screenshots of what’s happening?
<meta name="description" content="Custom policy for collapsing and expanding subtrees, different than TreeExpanderButton." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<script src="site/release/go.js"></script>
<script type="text/javascript" src="js.json"></script>
<!-- <script src="../assets/js/goSamples.js"></script> -->
<!-- this is only for the GoJS Samples framework -->
<script id="code">
var highlightColor = "red";
function init() {
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{ angle: 0, arrangement: go.TreeLayout.ArrangementVertical, layerSpacing: 35, })
});
myDiagram.contentAlignment = go.Spot.Left;
function mouseEnter(e, obj) {
var shape = obj.findObject("SHAPE");
shape.fill = "#6DAB80";
shape.stroke = "#A6E6A1";
var text = obj.findObject("TEXT");
text.stroke = "white";
};
function mouseLeave(e, obj) {
var shape = obj.findObject("SHAPE");
// Return the Shape's fill and stroke to the defaults
shape.fill = "cyan";
shape.stroke = null;
// Return the TextBlock's stroke to its default
var text = obj.findObject("TEXT");
text.stroke = "black";
};
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
mouseEnter: mouseEnter,
mouseLeave: mouseLeave,
},
{ isTreeExpanded: false },
$(go.Shape, "Rectangle", {fill: "cyan", strokeWidth: 2, stroke: null, name: "SHAPE", width: 60, height:60, alignment:go.Spot.Left}),
$(go.Panel, "Table",
$(go.RowColumnDefinition,
{ column: 0, alignment: go.Spot.Left}),
$(go.RowColumnDefinition,
{ column: 2, alignment: go.Spot.Right }),
$(go.TextBlock, // the node title
{ column: 0, row: 0, columnSpan: 3, alignment: go.Spot.Top,
font: "bold 5pt sans-serif", name: "TEXT", margin: new go.Margin(5, 5) },
new go.Binding("text", "name")),
$(go.Panel, "Horizontal",
{ column: 0, row: 1 },
$(go.Shape, // the "In" port
{ width: 4, height: 4, portId: "In", toSpot: go.Spot.Left }),
$(go.TextBlock, "In", {font:"bold 0pt sans-serif"}), // "In" port label
),
$(go.Panel, "Horizontal",$("TreeExpanderButton"),
{ column: 2, row: 1, rowSpan: 2 },
$(go.TextBlock, "Out", {font:"bold 0pt sans-serif",}), // "Out" port label
$(go.Shape, // the "Out" port
{ width: 4, height: 4, portId: "Out", fromSpot: go.Spot.Right })
),
)
);
myDiagram.linkTemplate =
$(go.Link,
{ relinkableFrom: true, relinkableTo: true, corner: 10 },
$(go.Shape,{ isPanelMain: true, stroke: "dodgerblue", strokeWidth: 4 }),
// new go.Binding("stroke", "isHighlighted",
// function(h, shape) { return h ? highlightColor : shape.part.data.color; })
// .ofObject(),
// new go.Binding("strokeWidth", "isHighlighted",
// function(h) { return h ? 2 : 1; })
// .ofObject(),
$(go.Shape, { toArrow: "Standard", fill: "blue", stroke: null, scale: 1.5 }));
// myDiagram.layout = $(go.LayeredDigraphLayout, { columnSpacing: 10 });
// After the nodes and links have been created,
// expand each of the tree roots to 3 levels deep.
// myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
// e.diagram.findTreeRoots().each(function(r)
// { r.expandTree(4); }
// );
// });
myDiagram.model =
$(go.GraphLinksModel,
{ linkFromPortIdProperty: "fromPort", // required information:
linkToPortIdProperty: "toPort", // identifies data property names
nodeDataArray : [
],
linkDataArray: [
// { from: "1006956001", fromPort: "Out", to: "1006958002", toPort: "In" },
// { from: "Server-1", fromPort: "Out", to: "Port-1", toPort: "In" },
// { from: "Server-1", fromPort: "Out", to: "Port-2", toPort: "In" },
// { from: "Rack-1", fromPort: "Out", to: "Server-2", toPort: "In" },
// { from: "Server-2", fromPort: "Out", to: "Port-3", toPort: "In" },
// { from: "Server-2", fromPort: "Out", to: "Port-4", toPort: "In" },
// { from: "Server-3", fromPort: "Out", to: "Port-6", toPort: "In" },
// { from: "Port-4", fromPort: "Out", to: "Port-6", toPort: "In" },
// { from: "Rack-2", fromPort: "Out", to: "Server-3", toPort: "In" },
// { from: "Rack-2", fromPort: "Out", to: "Server-4", toPort: "In" },
// { from: "Server-4", fromPort: "Out", to: "Port-5", toPort: "In" },
// { from: "Port-6", fromPort: "Out", to: "Port-4", toPort: "In" },
] });
myDiagram.groupTemplate =
$(go.Group, "Auto",
{isSubGraphExpanded:false},
{ layout: $(go.LayeredDigraphLayout,
{ direction: 0, columnSpacing: 10 }) },
$(go.Shape, "RoundedRectangle", // surrounds everything
{ parameter1: 10, fill: "rgba(128,128,128,0.33)" }),
$(go.Panel, "Vertical", // position header above the subgraph
{ defaultAlignment: go.Spot.Left },
$(go.Panel, "Horizontal", // the header
{ defaultAlignment: go.Spot.Left },
$("SubGraphExpanderButton"),
$(go.TextBlock, // group title near top, next to button
{ font: "Bold 12pt Sans-Serif" },
new go.Binding("text", "name")),
$(go.Picture,
{ margin: 10, width: 50, height: 50, background: "white" },
new go.Binding("source")),
),
$(go.Placeholder, // represents area for all member parts
{ padding: new go.Margin(0, 10), background: "white" })
)
);
for (var i = 0; i < myObj.Racks.length; i++) {
myDiagram.model.addNodeData({key:myObj.Racks[i].id, color:"yellow", isGroup:true, name:myObj.Racks[i].label});
for (var j = 0; j < myObj.Racks[i].Servers.length; j++) {
myDiagram.model.addNodeData({key:myObj.Racks[i].Servers[j].SerName,isGroup:true, color:"lightblue", group:myObj.Racks[i].id});
// myDiagram.model.addLinkData({from:myObj.Racks[i].label, fromPort: "Out", to:myObj.Racks[i].Servers[j].SerName, toPort:"In"});
for (var k = 0; k < myObj.Racks[i].Servers[j].Ports.length; k++) {
myDiagram.model.addNodeData({key:myObj.Racks[i].Servers[j].Ports[k].label, color:"lightgreen",group:myObj.Racks[i].Servers[j].SerName});
// myDiagram.model.addLinkData({from:myObj.Racks[i].Servers[j].SerName, fromPort: "Out", to:myObj.Racks[i].Servers[j].Ports[k].label, toPort:"In"});
}
}
}
myDiagram.model.addLinkData({from:"Port5", fromPort:"Out",to:"Port7", toPort:"In"});
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:600px; height:700px"></div>
</div>
</body>
</html>Ok, so you have a TreeExpanderButton in your node. Naturally, if you click the button to collapse the tree, the link and any child nodes are going to be collapsed. What you are showing is expected behavior. You probably shouldn’t be using the TreeExpanderButton.
Then, How can I make link with click, without TreeExpandeButton?
Can you describe exactly what it is you want?
Do you know about the LinkingTool? Do you want the link to exist always, and just toggle the visibility when the button is clicked?
Yes this is exactly what I want but I didn’t find any visibility change option for links in samples or intro.
For better describing: If I uncomment addlinkdata for connecting groups to nodes , I want to hide links between groups and nodes
Try a button like this:
$("Button",
{
click: function(e, btn) {
var node = btn.part;
var links = node.findLinksOutOf();
links.each(function(l) {
l.visible = !l.visible;
});
}
},
$(go.TextBlock, "Toggle Link")
)
Thank you, it is Helpful. but it is working only for expanded tree and it is adding buttons to nodes for which it is not necessary.