Hi,
I am facing some issue regarding aligning my first node to the top of the screen. The screen is loaded by default ( already present in the nodeDataArray) while other nodes to be added dynamically.
Want the node to appear just at the top of the screen aligned center horizontally not vertically.
-
Init method where I defined the template :
const $ = go.GraphObject.make;const dia = $(go.Diagram, {
‘undoManager.isEnabled’: true, // must be set to allow for model change listening
// ‘undoManager.maxHistoryLength’: 0, // uncomment disable undo/redo functionality
model: $(go.GraphLinksModel,
{ linkToPortIdProperty: 'toPort', linkFromPortIdProperty: 'fromPort', linkKeyProperty: 'key' // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel }
)
});
// define the Node template
var nodeTemplate =
$(go.Node, ‘Auto’,
{ toLinkable: true, fromLinkable: true }, new go.Binding("location", "loc", go.Point.parse), $(go.Shape, { strokeWidth: 0 }, new go.Binding('width', 'width'), new go.Binding('height', 'height'), new go.Binding('figure', 'figure'), new go.Binding('fill', 'color'), ), $(go.Panel, "Table", $(go.RowColumnDefinition, { row: 2, column: 2 }), $(go.TextBlock, { row: 0, column: 0 }, new go.Binding('text', 'desc'), new go.Binding('stroke', 'stroke'), ), $(go.TextBlock, { row: 1, column: 0 }, new go.Binding('text', 'task'), new go.Binding('stroke', 'stroke'), ), { click: function (e, obj) { console.log('called'); } } ),
);
return dia; -
node Data array :
public diagramNodeData: Array<go.ObjectData> = [
{ key: 0, desc: ‘Trigger Event’, task: ‘Choose an event’, width: 220, height: 60, stroke: ‘white’, color: ‘#1d1b1bb8’, figure: “Rectangle”, loc: “0 0”, category: “initialTemplate” }
];
Here is provided the location as 0,0 and the node is appearing the the center of the screen, but when I changed the location to any of the other value, there is no effect on the node positions.
Thanks.