I use GOJS ER Diagram sample with Layout as TreeLayout. I have set node's location data and IsInitial as false and isOngoing as false and diagram is not positioning based on node's location set. Here my code:
dgmEntityRelationship = $(go.Diagram, "dgmEntityRelationship",
{
initialContentAlignment: go.Spot.Top,
allowDelete: false,
allowCopy: false,
layout: $(go.TreeLayout, // use a TreeLayout to position all of the nodes
{
isInitial: false,
isOngoing: false,
treeStyle: go.TreeLayout.StyleRootOnly,
angle: 90,
layerSpacing: 80,
alternateAngle: 0,
alternateAlignment: go.TreeLayout.AlignmentStart,
alternateNodeIndent: 20,
alternateNodeIndentPastParent: 1,
alternateNodeSpacing: 20,
alternateLayerSpacing: 40,
alternateLayerSpacingParentOverlap: 1,
alternatePortSpot: new go.Spot(0, 0.999, 20, 0),
alternateChildPortSpot: go.Spot.Left
}),
"undoManager.isEnabled": true,
click: function(e, obj)
{
var node = dgmEntityRelationship.selection.first();
if (node == null)
{
jQuery("#btnShowAddElementModal").attr("disabled", "disabled");
}
}
});
// define several shared Brushes
var bluegrad = $(go.Brush, "Linear", { 0: "rgb(150, 150, 250)", 0.5: "rgb(86, 86, 186)", 1: "rgb(86, 86, 186)" });
var greengrad = $(go.Brush, "Linear", { 0: "rgb(158, 209, 159)", 1: "rgb(67, 101, 56)" });
var redgrad = $(go.Brush, "Linear", { 0: "rgb(206, 106, 100)", 1: "rgb(180, 56, 50)" });
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#e1fdfb", 0: "#cfebfe" });
// the template for each attribute in a node's array of item data
var itemTempl =
$(go.Panel, "Horizontal",
$(go.Shape,
{ desiredSize: new go.Size(10, 10) },
new go.Binding("figure", "figure"),
new go.Binding("fill", "color")),
$(go.Panel, "Table",
{
margin: 2
},
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
$(go.RowColumnDefinition, { column: 0, width: 150 }),
$(go.RowColumnDefinition, { column: 1, width: 100 }),
$(go.TextBlock,
{
row: 0,
column: 0, alignment: go.Spot.Left,
margin: new go.Margin(0, 4, 0, 2), // leave room for Button
stroke: "#333333",
font: "bold 14px Roboto"
},
new go.Binding("text", "name")),
{
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", "name"))
) // end of Adornment
},
$(go.TextBlock,
{
row: 0,
column: 1,
alignment: go.Spot.Left,
margin: new go.Margin(0, 4, 0, 2), // leave room for Button
stroke: "#333333",
font: "bold 14px Roboto"
},
new go.Binding("text", "dataType")))
);
// define the Node template, representing an entity
dgmEntityRelationship.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{
selectionAdorned: false,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#d7d7d7",
},
{
click: function (e, obj) {
var node = dgmEntityRelationship.selection.first();
if (node != null) {
if (node.data.key == "Root") {
jQuery("#btnDeleteElement").attr("disabled", "disabled");
}
else {
jQuery("#btnDeleteElement").removeAttr("disabled");
}
jQuery("#btnShowAddElementModal").removeAttr("disabled");
}
}
},
new go.Binding("location", "loc").makeTwoWay(),
// define the node's outer shape, which will surround the Table
$(go.Shape, "RoundedRectangle",
{
fill: lightgrad, stroke: "#2196f3", strokeWidth: 1,
}),
$(go.Panel, "Table",
{
margin: 8, stretch: go.GraphObject.Fill
},
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
// the table header
$(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2), // leave room for Button
font: "bold 16px Roboto"
},
new go.Binding("text", "key")),
// the collapse/expand button
$("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles
{ row: 0, alignment: go.Spot.TopRight }),
// the list of Panels, each showing an attribute
$(go.Panel, "Vertical",
{
name: "LIST",
row: 1,
padding: 3,
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: itemTempl
},
new go.Binding("itemArray", "items"))
) // end Table Panel
); // end Node
// define the Link template, representing a relationship
dgmEntityRelationship.linkTemplate =
$(go.Link, // the whole link panel
{
selectionAdorned: true,
layerName: "Foreground",
reshapable: true,
routing: go.Link.AvoidsNodes,
corner: 5,
curve: go.Link.JumpOver
},
$(go.Shape, // the link shape
{ stroke: "#333333", strokeWidth: 1.5}),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "14px Roboto",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.None
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px Roboto",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.None
},
new go.Binding("text", "toText"))
);
loadDiagramData();
}
Please help me to find the issue. Thank you for your help!!!
You have a TwoWay Binding on Node.location, which is good. And you have disabled automatic layout invalidation (Layout.isInitial and Layout.isOngoing) so that the Diagram.layout doesn't automatically move the nodes.
Are there any errors or warnings when using the debug version of the GoJS library?
My guess is that you are not providing instances of Point as the values of data.loc, and that is causing Binding errors.
EDIT: does the following do what you are looking for?
myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.TreeLayout, { isInitial: false, isOngoing: false })
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc").makeTwoWay(),
$(go.Shape, { fill: "white"}),
$(go.TextBlock, { margin: 8 }, new go.Binding("text", "key"))
);
myDiagram.model = new go.GraphLinksModel([
{ key: "Alpha", loc: new go.Point(30, 50) },
{ key: "Beta", loc: new go.Point(80, 10) },
{ key: "Gamma", loc: new go.Point(130, 70) },
{ key: "Delta", loc: new go.Point(110, 100) }
], [
{ from: "Alpha", to: "Beta" }, { from: "Alpha", to: "Gamma" }, { from: "Beta", to: "Beta" }, { from: "Gamma", to: "Delta" }, { from: "Delta", to: "Alpha" } ]);