This sample showcases all predefined GoJS figures. This sample also makes use of GoJS Highlighting data bindings: Mouse-hover over a shape to see its name.
You can specify a predefined geometry for a Shape by setting its Shape.figure.
In order to reduce the size of the GoJS library, most predefined figures are in the Figures.js file. You can load this file or simply load only those figures that you want to use by copying their definitions into your code.
A number of very common figures are predefined in go.js:
"Rectangle", "Square", "RoundedRectangle", "RoundedTopRectangle", "RoundedBottomRectangle",
"RoundedLeftRectangle", "RoundedRightRectangle", "Border", "Ellipse", "Circle",
"TriangleRight", "TriangleDown", "TriangleLeft", "TriangleUp", "Triangle", "Diamond", "LineH",
"LineV", "None", "BarH", "BarV", "MinusLine", "PlusLine", "XLine", "LineRight", "LineDown",
"LineLeft", "LineUp", "Capsule". These figures are filled green above, instead of pink.
With GoJS you can also define your own custom shapes with SVG-like path syntax, see the SVG icons sample for examples or the Geometry Path Strings intro page to learn more.
For predefined arrowheads, see the Arrowheads sample.
For the "RoundedRectangle" figure, you can set the Shape.parameter1 and Shape.parameter2 values to modify the corner radius and which corners are rounded, respectively.
parameter2 is a number that is specified by four bit flags (1, 2, 4, 8), describing
the top-left, top-right, bottom-right, and bottom-left corners respectively. The flags can be
defined to specify which corners to round:
This predefined layout is used for placing Nodes in a grid-like arrangement. Nodes can be ordered, spaced apart, and wrapped as needed. This Layout ignores any Links connecting the nodes being laid out. More information can be found in the GoJS Intro.
The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.
One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.
More information can be found in the GoJS Intro.