Square layout

GoJS
1

Similar to the circular layout, I want to customize a square layout, how should I operate?

2

If you do not want GridLayout, then there is no pre-defined layout that arranges nodes into a square.

You will need to define your own custom Layout: Extending GoJS -- Northwoods Software You can find examples of custom Layouts in the samples and extensions directories.

3 
function SquareLayout(){
go.Layout.call(this);
this._offset = new go.Size(80,80);
 }
 go.Diagram.inherit(SquareLayout, go.Layout);

SquareLayout.prototype.doLayout = function(coll) {
//console.log("coll："+coll);//coll是group
var parts = this.collectParts(coll);//parts是group内部所有节点
//console.log("parts："+parts);
var node = new go.List(go.Part);
parts.each(function (p) {
    if (!(p instanceof go.Link)) {//只要go.Node
        node.add(p);
    }
});

var sum = node.size;
var a = parseInt(sum/4);
var yu = sum-4*a;
if(yu==3){
	var n1 = a+1;
	var n2 = a+1;
	var n3 = a+1;
	var n4 = a;
}
if(yu==2){
	var n1 = a+1;
	var n2 = a;
	var n3 = a+1;
	var n4 = a;
}
if(yu==1){
	var n1 = a+1;
	var n2 = a;
	var n3 = a;
	var n4 = a;
}
if(yu==0){
	var n1 = a;
	var n2 = a;
	var n3 = a;
	var n4 = a;
       }

var x = this.arrangementOrigin.x;
var y = this.arrangementOrigin.y;
var offset = this.offset;
var left = n1+n2;
var bottom = n1+n2+n3;
var x2 = 0;
var x3 = 0;
var y2 = 0;

    if(sum>=4){
	for(var i=0;i<sum;i++){
		//console.log("item:"+node.get(i))
		var item = node.get(i);
		if(i<n1){
			x+=offset.width;
			item.move(new go.Point(x,y));
			//console.log(x,y);
			x2=x+80;
		}else if(n1<=i&&i<left){
			y+=offset.height;
			item.move(new go.Point(x2,y));
			//console.log(x2,y);
			y2=y+80;
		}else if(left<=i&&i<bottom){
			x2-=offset.width;
			item.move(new go.Point(x2,y2));
			//console.log(x2,y2);
		}else{
			//console.log("i:"+i)
			y2-=offset.height;
			item.move(new go.Point(x3,y2));
			//console.log(x3,y2);
		}
    }
}else{
	for(var i=0;i<sum;i++){
		var item = node.get(i);
		x += offset.width;
		item.move(new go.Point(x,y));
	}
}


 }
Object.defineProperty(SquareLayout.prototype, "offset", {
get: function() { return this._offset; },
set: function(val) {
  if (!(val instanceof go.Size)) {
    throw new Error("new value for SquareLayout.offset must be a Size, not: " + val);
  }
  if (!this._offset.equals(val)) {
    this._offset = val;
    this.invalidateLayout();
  }
}
 });

This is my customlayout Code.In addition to the move(),that can move the node location.
Is there any other way to get the specific size, text, color, and other information of each node?
Is there a way to get the link’s from/to information?

4

For the size of a Node, use its GraphObject.actualBounds

For text and color and other things, it depends entirely on the template that you are using. Perhaps those properties that you are looking for are actually set via Bindings, so you can find the real information on the Node.data object.

For navigating Links, use the Link.fromNode and Link.toNode properties. I suggest you look at the documentation for the Link and Node classes.

5

Links from the group internal node connection group external node,
or links from the group internal node connection other group internal node,
in the layout of the custom , the following code I can only get data node, and can’t get the data of the link.

    var node = new go.List(go.Part);
    var link = new go.List(go.Part);
    parts.each(function (p) {
    if (!(p instanceof go.Link)) {//只要go.Node
        node.add(p);
        console.log("node.data:------------------");
        ......
        console.log("node.data.desiredSize:"+p.data.desiredSize);
    }else{
    	link.add(p);
    	console.log("link.data:------------------");
    	console.log("link.data.fromNode:"+p.data.fromNode);
    	console.log("link.data.toNode:"+p.data.toNode);
    }

Can you help me?Thank you very much!

6

link.fromNode and link.toNode will give you the connected Nodes.
link.data.from and link.data.to normally will return the keys of the connected nodes.