How to find and locate center of screen(drawing area)

GoJS
#1

Dear friends,

i have set of nodes and subnodes (left & right both the sides), i have to align and rearrafe it in the screen in their respective places while add/delete a node. Please help me to find center of the screen(chart drawing area). and if any easy way to place those in respective order pls help me.

please explain me, if i create a node, from where its x,y starts i mean center of node(box) or topleft of the node (box).

Thanks and Regards,
Syed Abdul Rahim

#2

myDiagram.viewportBounds.center
myNode.actualBounds.center

Note that you cannot scroll a Diagram or move a Node by modifying Diagram.viewportBounds or Node.actualBounds, because both of those properties are read-only.

Instead you have to set Diagram.position or Node.position one way or another. You can just set those properties with new Point values of course. Or you could call Diagram.scroll or Diagram.scrollToRect or Diagram.centerRect or Diagram.zoomToFit or Diagram.zoomToRect. Or for nodes you could set Node.location or do anything that might cause a layout to move nodes.

Please read GoJS Coordinate Systems-- Northwoods Software and GoJS Nodes -- Northwoods Software

#3

dear mr.walter,

Greetings! iam trying to get below items,
alert(diagram.viewportBounds.center);
alert(diagram.grid.height);

it gives the answer as NaN and point(NaN,NaN).

pls tell me what is teh reason?

my full code is below:

function init() {
if (window.goSamples) goSamples(); // init for these samples – you don’t need to call this

var $ = go.GraphObject.make;  // for conciseness in defining templates

diagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
              {
                "undoManager.isEnabled": true  // enable undo & redo
              });

alert(diagram.grid.height);
alert(diagram.viewportBounds.center);

diagram.nodeTemplate =
(go.Node, "Auto", new go.Binding("visible","visible"), (go.Shape, “RoundedRectangle”,
{ fill: “white” },
new go.Binding(“fill”, “color”)), // shape.fill = data.color
$(go.TextBlock,
{ margin: 5 },
new go.Binding(“text”, “txt”)),
{click: function(e,obj){changeName(obj)}} // textblock.text = data.key
);

diagram.linkTemplate =
(go.Link, (go.Shape,
new go.Binding(“stroke”, “color”), // shape.stroke = data.color
new go.Binding(“strokeWidth”, “thick”)), // shape.strokeWidth = data.thick
$(go.Shape,
{ toArrow: “OpenTriangle”, fill: null },
new go.Binding(“stroke”, “color”), // shape.stroke = data.color
new go.Binding(“strokeWidth”, “thick”)) // shape.strokeWidth = data.thick
);

var nodeDataArray = [
{ txt: “Alpha”, color: “lightblue” },
{ txt: “Beta”, color: “pink” }
];
var linkDataArray = [
{ from: “Alpha”, to: “Beta”, color: “blue”, thick: 2 }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}

#4

Displaying a diagram happens asynchronously. You have to wait until either you see the diagram, or until the “InitialLayoutCompleted” DiagramEvent happens.