All VisualScript documents are built from a single VS.Document() object.
Creating a VisualScript document object also creates the single root shape of the diagram.
All documents begin with this shape, which can be accessed by the GetTheShape() method of the document.
This script is the beginning of any VisualScript document. It defines a single shape
of default size with default appearance and the label "Hello World" centered on the canvas.
{
var myDocument=new VS.Document();
var rootShape=myDocument.GetTheShape();
rootShape.SetLabel("Hello World");
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.
}
Read the VisualScript SDK Reference Guide to see a complete list of
methods you can use to set properties for a Shape and add new objects to it.
Clearly most documents don't consist of a single shape. You can make a document with
virtually any arrangement of multiple shapes by adding either a ShapeContainer, a ShapeConnector, or
a Table to the root shape and then recursively add more shapes to it.
Here's how you'd add a ShapeConnector to the shape and then add two shapes to the connector:
{
var myConnector=rootShape.AddShapeConnector("Orgchart");
myConnector.AddShape();
myConnector.AddShape()
}
Adding a ShapeContainer will produce this visual with the following script:
{
var myContainer=rootShape.AddShapeContainer("Row");
myContainer.AddShape();
myContainer.AddShape()
}
Adding a Table to the root shape will give you a nested grid-like arrangement:
{
var rootShape = vs.GetTheShape();
rootShape.SetFillColor("#FFFFFF");
var myTable=rootShape.AddTable(3,3);
var myCell1=myTable.AddCell(1,1);
myCell1.SetLabel("Cell 1");
var myCell2=myTable.AddCell(2,2);
var myInsideShape=myCell2.AddShape();
myInsideShape.SetFillColor("#93B0CD");
var myShapeContainer=myInsideShape.AddShapeContainer("Row");
var myInsideShape1=myShapeContainer.AddShape();
myInsideShape1.SetLabel("Choice A").SetFillColor("#FFFFFF");
var myInsideShape2=myShapeContainer.AddShape();
myInsideShape2.SetLabel("Choice B").SetFillColor("#FFFFFF");
}
In the recipes that follow, we will use these building blocks to build lots of different types of diagrams.
