Hi,
I want the following behavior and am looking for some help.
I have a treelayout graph that a user builds in a div (myDiagram). they double click and a new node gets added and they can rearrange by drawing links from one node to another. Nothing new, just like in the examples. BUT I have another button on the page which when clicked, I want to bring in another treenode that I have saved in the database, this tree node was constructed in a separate process(diagram). I then want the user to be able to draw associated links between the two SEPERATE trees.
Any suggestions on how to do this?
thanks
Nuz
Are you looking for something like the Record Mapper sample, allowing the user to map items in one list with items in another list? But where instead of two lists you would have two trees such as shown in Tree View?
Sure, that should be easy enough to do. First of all, you’ll need to use a GraphLinksModel, and not a TreeModel.
Secondly, you’ll want to use at least two categories of link templates – one for the links within a tree and one for the links between trees. Actually, the Org Chart with extra links sample demonstrates this with different links within a single tree. Note how Links between trees would have isTreeLink set to false and isLayoutPositioned set to false, unlike the default values which would apply to Links within a tree.
Thirdly, you’ll need to provide a LinkingBaseTool.linkValidation predicate on the LinkingTool (and on the RelinkingTool if you allow that) to make sure that user-drawn links only go between the two trees, and perhaps only in one direction. You might have additional constraints too.
Fourthly, consider constraining the movements that the user can do when they move a Node or a collection of Nodes. I don’t know what limitations would make sense for your app, but you might want to set the Node.minLocation or Node.maxLocation to keep nodes within their half of the diagram. Or set Node.dragComputation for a more custom computation of where each Node may be moved. And you might want to consider limitations on copying too.
If I think of anything else, I’ll try to post here. If I get enough free time I can try to create this sample for everyone.
Hi Walter,
Thanks for the tips. It gave me some ideas on how to go about doing it. I wasn’t able to make the record mapper work in that I couldn’t figure out now to replace the table with a treelayout. But I got some ideas and I used the groups concept and I am getting close, but I couldn’t get the layout in the group boxes to display in tree mode, they are not lining up properly. Also, I frankly will need some help on how to do the two different linktemplates.
Here is my code for reference: Thanks!
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, “myDiagram”, // must be the ID or reference to div
{ initialContentAlignment: go.Spot.Center,
layout:
$(go.TreeLayout,
{
treeStyle: go.TreeLayout.StyleLastParents,
arrangement: go.TreeLayout.ArrangementHorizontal,
// properties for most of the tree:
angle: 90,
layerSpacing: 35,
// properties for the “last parents”:
alternateAngle: 0,
alternateLayerSpacing: 35,
alternateAlignment: go.TreeLayout.AlignmentStart,
alternateNodeIndent: 10,
alternateNodeIndentPastParent: 1.0,
alternateNodeSpacing: 10,
alternateLayerSpacing: 30,
alternateLayerSpacingParentOverlap: 1.0,
alternatePortSpot: new go.Spot(0.01, 1, 10, 0),
alternateChildPortSpot: go.Spot.Left
}),
});
myDiagram.nodeTemplate =
$(go.Node, “Horizontal”,
$(go.Panel, “Auto”,
$(go.Shape, “RoundedRectangle”, // the outside rounded rectangle
{
name: “SHAPE”,
fill: $(go.Brush, go.Brush.Linear, { 0: “OldLace”, 1: “PapayaWhip” }),
stroke: “#CDAA7D”,
parameter1: 10, // corner size (default 10)
portId: “”,
fromLinkable: true,
toLinkable: true,
cursor: “pointer”,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides
}),
$(go.Shape, “RoundedRectangle”, // the inner “Transaction” rounded rectangle
{
margin: 6,
stretch: go.GraphObject.Fill,
stroke: “#CDAA7D”,
parameter1: 8,
fill: “lightsteelblue”,
visible: true
}),
$(go.TextBlock,
new go.Binding(“text”, “key”))
)
);
// define the Link template
myDiagram.linkTemplate =
$(go.Link, go.Link.Orthogonal,
{
corner: 5,
relinkableFrom: true,
relinkableTo: true
},
$(go.Shape, {
strokeWidth: 2,
stroke: “lightslategray”
}),
$(go.Shape,
{ toArrow: “Standard”, stroke: null })
);
var nodeDataArray = [
{ key: “Group1”, isGroup: true },
{ key: “Group2”, isGroup: true },
{ key: “Alpha”, group: “Group1” }, { key: “Beta”, group: “Group1” }, { key: “Gamma”, group: “Group1” }, { key: “Delta”, group: “Group1” },
{ key: “Epsilon”, group: “Group2” }, { key: “Zeta”, group: “Group2” }, { key: “Eta”, group: “Group2” }, { key: “Theta”, group: “Group2” }
];
var linkDataArray = [
{ from: “Alpha”, to: “Beta” },
{ from: “Beta”, to: “Gamma” },
{ from: “Beta”, to: “Delta” },
{ from: “Epsilon”, to: “Zeta” },
{ from: “Epsilon”, to: “Eta” },
{ from: “Epsilon”, to: “Theta” }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
Still need some help.
Regards
If you want to represent each tree as a Group, that sounds good.
You’ll need to define a group template whose Group.layout property is a TreeLayout like the one use by the TreeView sample. The Diagram.layout property would not need to be set, since you should set the Group.position via a data Binding.
For the second link template, I suggest you start with a copy of one of the extra link templates defined in the Org Chart with Extras sample that I mentioned above.