Hello,
We are creating organization chart using GoJS. User can reposition the nodes by moving them around using mouse.
When user saves chart information and comes back on that screen we need to load the chart using same location parameters, so it is loaded as it was saved. Please let us know how GoJS provides location parameters for each node and links between them. So it is loaded at same co-ordinates as it how it was saved.
Thanks
You just need a TwoWay Binding on Node.location. Many of the samples use this, and it’s discussed in http://gojs.net/latest/intro/dataBinding.html.
If you have a Diagram.layout, you’ll need to set Layout.isInitial to false on the Layout so that the layout isn’t performed immediately after loading.
Hi,
I have implemented same as you have sugested. But while its loading in this mode the go library is running infinite loop and getting message as in image. Below are the which I am using for the same,
myDiagram.layout =
GO(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: 90,
alternateLayerSpacing: 35,
alternateAlignment: go.TreeLayout.AlignmentBus,
alternateNodeSpacing: 20,
isInitial: $(’.hdnIsAutoAlign’).val().toLowerCase() === ‘true’ ? true : false,
isRealtime: false, sorting: go.TreeLayout.SortingAscending
}, { comparer: keyCompare } //{ comparer: go.LayoutVertex.smartComparer },
);
// define the group template
myDiagram.groupTemplateMap.add("CommandSectionGroup",
GO(go.Group, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "location", function (location) {
return new go.Point(location.x, location.y)
}).makeTwoWay(),
and below setting location,
if ($('.hdnIsAutoAlign').val().toLowerCase() === 'false')
{
if (loc !== null && loc !== undefined) {
var position = loc.split(' ');
/setting default values
var location = {
x: 200,
y: 300,
}
if (position.length > 0) {
location = {
x: position[0],
y: position[1],
}
}
}
}
else {
isAutoAllignOn = true;
}
return location;
}
You first need to debug your code, since what little I see of it appears to have bugs in it. Whether that is causing your infinite recursion I cannot tell.
Is there a reason you are not using go.Point.parse?
No there is no any specific reason. I just pick the code from your sample which you suggested and used the same.
Hi,
I have some nodes which is in hidden mode, do we need to set the location for hidden node as well. Actually when we setting the location for nodes while loading diagram then we are getting some issue, like first they are not positioning at correct location and also diagram getting hang out as I have attached the image. Please suggest what is wrong in this. And also I want to set location on basis of some conditions like if Auto align on then we dont need to set the location but if its off then we have to set the location. I have set the isInitial = false or true on basis of Auto align. Please suggest why the diagram getting hanging.
Thanks,
A Binding of Node.location to some model data property will assign the location if the data property is not undefined and if any conversion function doesn’t have an error. You didn’t say when the code that you quoted would be called, but I don’t think any conversion function should be depending on some global variable to decide what to do.
You have a Diagram.layout, so that should do the automatic positioning of all of the nodes for you, unless you have set isInitial to false (for loading) or isOngoing to false (for later changes to the diagram).
The Page Flow sample, http://gojs.net/latest/samples/pageFlow.html, provides an example similar to what you are talking about. Every time the model/diagram is loaded, the nodes get their saved locations. Whenever a layout happens, the nodes get new locations. Because Layout.isInitial and isOngoing are both set to false, there isn’t any automatic layout that happens, so a layout only happens because some code calls Diagram.layoutDiagram.
Quoted code is calling while loading the diagram. When before load diagram I am filling nodeDataArray which contains location as below,
var getLocation = function (loc) {
if ($(’.hdnIsAutoAlign’).val().toLowerCase() === ‘false’)
{
if (loc !== null && loc !== undefined) {
var position = loc.split(' ');
var location = {
x: null,
y: null,
}
if (position.length > 0 && loc !== '') {
location = {
x: position[0] == undefined ? null : position[0],
y: position[1] == undefined ? null : position[1],
}
}
}
}
else {
isAutoAllignOn = true;
}
return location;
}
var addCommandSectionData = function (data) {
var location = getLocation(data[’@LOCATION’]);
//This is as Department in XML
var dataToReturn = [];
//calculation function for isHidden variable
var isHidden = function () {
var returnVariable;
if (data["@TITLENAME"].toUpperCase() === "INITIAL RESPONSE RESOURCES" || data["@TITLENAME"].toUpperCase().indexOf("UNASSIGNED") > -1) {
returnVariable = true
} else {
if ((data["@ISHIDDEN"] !== undefined) && (!isNaN(parseInt(data["@ISHIDDEN"])))) {
returnVariable = !!parseInt(data["@ISHIDDEN"]);
} else {
returnVariable = false; // default case
}
}
return returnVariable;
}();
var gojsNodeData = {
Title: data["@TITLENAME"],
isGroup: true,
category: "CommandSectionGroup",
key: data["@NODECODE"],
CommandSectionType: fnGetCommandSectionTypeFromLevelId(data["@LEVELID"]),
isHidden: isHidden,
color: data["@NODECOLOR"] === null ? OrgChartConfig.NodeBodyColor : data["@NODECOLOR"],
sequence: parseInt(data["@SEQUENCENUMBER"]),
isRootItem: false,
level: data["@LEVELID"],
nodeSectionId: data["@NODESECTIONID"],
titleTypeId: data["@TITLETYPEID"],
isHideChildrenNodes: data["@HIDECHILDRENNODES"],
isCollapsed: data["@ISCOLLAPSED"],
location: location,
forecolor: invertColor((data["@NODECOLOR"] === null ? OrgChartConfig.NodeBodyColor : data["@NODECOLOR"]))
}
Are you saying that I should set the location of nodes after load the diagram? Please suggest if any what is wrong with this code?
Oh, I thought that code was being called in a Binding conversion function.
In any case your getLocation function appears to have several bugs in it – but I cannot be sure. We cannot debug your code for you, since we cannot know what you want to do in your own app, so I suggest that you step through the code in all of the kinds of circumstances in which it is called.
Hi,
Thanks for help to set the location. Now I am able to set the location of every node as I wanted.
But I have some issue. When chart is loading first time then its rendering correctly in a line in center. If I change the location of nodes then its working well. Now after that if I add any node or drop another node then the diagram gets aligned in its first position (comes in a line in center). Is there any property to prevent this?
Thanks,
I’m sorry, but I don’t understand what you mean. Before and after screenshots might be useful. Did you consider the Layout.isOngoing and isInitial properties that I mentioned earlier?
Thanks,
I mentioned only isInitial=false. Lets mentioned isOngoing =false too.