The VisualScript Cookbook

7/20 Page

Getting Started with VisualScript

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.
}
VisualScript hello world shape

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()
}
VisualScript simple structure created with a ShapeConnector

Adding a ShapeContainer will produce this visual with the following script:

{
  var myContainer=rootShape.AddShapeContainer("Row");
  myContainer.AddShape();
  myContainer.AddShape()
}
VisualScript shapes inside a container

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");
}
VisualScript shapes inside a table

In the recipes that follow, we will use these building blocks to build lots of different types of diagrams.

7/20 Page
By continuing to use the website, you consent to the use of cookies.   Read More