The VisualScript Cookbook

15/20 Page

Creating a Grid of Shapes with VisualScript

Tables serve two purposes: you can use them to divide shapes into cells for displaying information or use them as a grid to layout multiple shapes.

The following VisualScript code will generate a shape divided into a grid of large cells with shapes positioned in some of the cells.

{
        var myDocument=new VS.Document();
        var rootShape=myDocument.GetTheShape();
        rootShape.SetFillColor("None");
        //Column Labels
        var myTable=rootShape.AddTable(11,7);
        myTable.SetColumnWidth(150).SetRowHeight(95).SetAlternateRows();
        //Set the height of row 1 and the line thickness of row 9
        var myRowProperties=myTable.AddRowProperties(1);
        myRowProperties.SetHeight(50);
        myRowProperties=myTable.AddRowProperties(9);
        myRowProperties.SetLineThickness(3);
        myTable.AddCell(1,2).SetLabel("Iteration 1.1");
        myTable.AddCell(1,3).SetLabel("Iteration 1.2");
        myTable.AddCell(1,4).SetLabel("Iteration 1.3");
        myTable.AddCell(1,5).SetLabel("Iteration 1.4");
        myTable.AddCell(1,6).SetLabel("Iteration 1.5 (IP)");
        myTable.AddCell(1,7).SetLabel("P1 >>>2");
        //Row Labels
        myTable.AddCell(2,1).SetLabel("Milestones");
        myTable.AddCell(3,1).SetLabel("Unicorns");
        myTable.AddCell(4,1).SetLabel("Dolphins");
        myTable.AddCell(5,1).SetLabel("Bears");
        myTable.AddCell(6,1).SetLabel("Eagles");
        myTable.AddCell(7,1).SetLabel("Iguanas");
        myTable.AddCell(8,1).SetLabel("Antelope");
        myTable.AddCell(9,1).SetLabel("Tarantulas");
        myTable.AddCell(10,1).SetLabel("Needs UX help");
        myTable.AddCell(11,1).SetLabel("Needs Sys Arch help");
        //add two shapes to 3,2
        var myShape=myTable.AddCell(3,2).AddShape().Hide();
        var myContainer=myShape.AddShapeContainer(VS.ShapeContainerArrangement.Row);
        myContainer.AddShape().SetLabel("Issue 1");
        myContainer.AddShape().SetLabel("Issue 2").SetID(1);
        myShape=myTable.AddCell(4,4).AddShape();
        myShape.SetLabel("Issue 19").SetFillColor("#FF0000").SetID(3).SetShapeType(VS.ShapeTypes.RoundedRectangle).SetTextAlignH(VS.TextAlignH.Left);
        myShape=myTable.AddCell(2,6).AddShape();
        myShape.SetLabel("Milestone 1").SetFillColor("#FFFF00").SetID(2);
        myShape=myTable.AddCell(6,2).AddShape();
        myShape.SetLabel("Milestone 3");
        var myReturn=myDocument.AddReturn(1,2);
        myReturn.SetStartDirection(VS.Directions.Right).SetEndDirection(VS.Directions.Left).SetLineColor("#FF0000").Curved();
        myReturn=myDocument.AddReturn(3,2);
        myReturn.SetStartDirection(VS.Directions.Right).SetEndDirection(VS.Directions.Left).SetLineColor("#FF0000").Curved();
        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.
        }
      

Grid visual

Initializing the Table

The table itself is defined with minimum row and column dimensions and to alternate colors with some simple markup using the VisualScript SDK.

{
        myTable.SetColumnWidth(150).SetRowHeight(95).SetAlternateRows();
        }
      

Adding Shapes to Cells

Some of the cells include a Shape object. Each cell can only contain one shape, but that shape may contain a ShapeContainer or a ShapeConnector, allowing you to place complex diagrams inside one or more cells. The cell with a shape grows to accommodate the size of the shape or shapes inside.

Note in the example above that the column labeled "Iteration 1.1" is wider than the rest because of the two shapes inside the "Unicorns" row.

{
        //add two shapes to 3,2
        var myShape=myTable.AddCell(3,2).AddShape().Hide();
        var myContainer=myShape.AddShapeContainer(VS.ShapeContainerArrangement.Row);
        myContainer.AddShape().SetLabel("Issue 1");
        myContainer.AddShape().SetLabel("Issue 2").SetID(1);
        }
      

The two shapes are actually inside a ShapeContainer inside the single shape allowed for this cell. The shape itself is hidden.

You can add shapes to cells in tables if the shape is the first shape in a VisualScript object, or a member of a ShapeContainer. However, they are ignored if the shape is a member of a ShapeConnector.

You can also use the "Hide" property of the first shape in a VisualScript object if it contains a table with shapes. This lets you arrange shapes on a grid without showing the grid itself:

Grid with no border
15/20 Page
By continuing to use the website, you consent to the use of cookies.   Read More