The VisualScript Cookbook

14/18 Page

Arranging Shapes in Complex Ways using Nesting

Like ShapeConnectors, ShapeContainers are recursive. The shapes in a ShapeContainer can themselves be ShapeContainers. This makes it possible to create almost any layout of shapes on a page.

Creating a More Complex Layout with Multiple ShapeContainers

Let's say you want to arrange a larger shape above a row of smaller shapes. This script creates a diagram with the container shapes left in place for clarity. The first ShapeContainer defines a column arrangement for two shapes. The second shape contains a ShapeContainer with three additional shapes in a row arrangement.

{
var myDocument=new VS.Document();
var rootShape=myDocument.GetTheShape();
var myContainer=rootShape.AddShapeContainer(VS.ShapeContainerArrangement.Column);
myContainer.AddShape().SetMinHeight(700).SetMinWidth(550);
var parent2=myContainer.AddShape();
var rowContainer=parent2.AddShapeContainer(VS.ShapeContainerArrangement.Row);
rowContainer.AddShape();
rowContainer.AddShape();
rowContainer.AddShape();
var vsJSON = myDocument.toJSON(); //turn the VisualScript object constructed using the API into a JSON string
vsCompleteCallback(vsJSON); //pass the JSON string into the callback to trigger the creation of a document.
}
VisualScript shape rows with large shape

Using the "Hide" property on the container shapes gives us this cleaner version:

VisualScript shape rows with large shape with no border

Placing Multiple Trees and Flows on a Page

Any shape that appears in a ShapeContainer can be the root of a tree or flow defined using ShapeConnectors:

{
var myDocument=new VS.Document();
var rootShape=myDocument.GetTheShape();
var myContainer=rootShape.AddShapeContainer(VS.ShapeContainerArrangement.Column);
//build a tree using the first shape in the connector
var treeRoot=myContainer.AddShape();
var myConnector=treeRoot.AddShapeConnector(VS.ShapeConnectorTypes.OrgChart);
var child1=myConnector.AddShape();
var child2=myConnector.AddShape();
var child3=myConnector.AddShape();
myConnector=child1.AddShapeConnector();
myConnector.AddShape();
myConnector.AddShape();
myConnector=child2.AddShapeConnector();
myConnector.AddShape();
myConnector.AddShape();
myConnector=child3.AddShapeConnector();
myConnector.AddShape();
myConnector.AddShape();
//build another shape container using the second shape
var parent2=myContainer.AddShape();
var rowContainer=parent2.AddShapeContainer(VS.ShapeContainerArrangement.Row);
rowContainer.AddShape();
rowContainer.AddShape();
rowContainer.AddShape();
var vsJSON = myDocument.toJSON(); //turn the VisualScript object constructed using the API into a JSON string
vsCompleteCallback(vsJSON); //pass the JSON string into the callback to trigger the creation of a document.
}
VisualScript shape rows with diagram

This allows you to place multiple trees and flows on a page by using multiple shapes inside a ShapeContainer.

14/18 Page