Shape class

A Shape is a GraphObject that shows a geometric figure. The Geometry determines what is drawn; the properties #fill and #stroke (and other stroke properties) determine how it is drawn.

There are generally two types of shapes: Those that use a custom Geometry by setting Shape#geometry, and those that receive an automatically generated Geometry using the value of #figure, #toArrow, or #fromArrow. An explicitly set Geometry always supersedes the figure and arrowhead properties.

Some created Shapes:

// A shape with the figure set to RoundedRectangle:
new go.Shape({ figure: "RoundedRectangle", fill: "lightgreen" })
// Alternatively:
new go.Shape("RoundedRectangle" { fill: "lightgreen" })

// A shape with a custom geometry:
new go.Shape(
    { geometry: go.Geometry.parse("M120 0 L80 80 0 50z") })

// A shape with a custom geometry, using geometryString:
new go.Shape(
   { geometryString: "F M120 0 L80 80 0 50z",
     fill: "lightgreen" })

// A common link template, using two shapes,
// the first for the link path and the second for the arrowhead
// The first shape in a link is special, its geometry is set by the Link's routing,
// so it does not need a geometry or figure set manually
myDiagram.linkTemplate =
  new go.Link()
    .add(new go.Shape(
      { strokeWidth: 2, stroke: 'gray' }))
    .add(new go.Shape(
      { toArrow: "Standard", fill: 'gray', stroke: null }))

You can see more custom geometry examples and read about geometryString on the Geometry Path Strings Introduction page.

When automatically generating a Shape Geometry, the value of #toArrow takes precedence, then #fromArrow, then #figure. If the value of #toArrow or #fromArrow is "None" then it is ignored, and the "None" value of #figure is identical to "Rectangle".

All of the predefined figures are shown in the Shapes sample. You can define your own named figures by calling the static function Shape.defineFigureGenerator. Get a Map of named figures by calling the static function Shape.getFigureGenerators.

All of the predefined arrowheads are shown in the Arrowheads sample. You can define your own named arrowheads by calling the static function Shape.defineArrowheadGeometry. Get a Map of named arrowheads by calling the static function Shape.getArrowheadGeometries.

You can see a copy of all of the built-in arrowhead definitions in this file: Arrowheads.js.

The Shape properties #parameter1, and #parameter2 determine details of the construction of some #figure geometries. Specifically, they often set the #spot1, #spot2 for the Shape. These spots determine the "inner area" of an Auto panel when a Shape is the main object. See the Auto Panels section of the Panels Introduction page for more details.

Shapes use their geometric bounds when determining hit testing, but use rectangular bounds when participating in (panel) layouts.

Implemented types

• GraphObject

Available extensions

• GraphObject$Typings
• Shape$Typings

Annotations

• @JS()
• @staticInterop

Constructors

Shape.$1()

factory

Shape.$2([dynamic init])

factory

Shape.$3([String? figure, dynamic init])

factory

Properties

hashCode → int

The hash code for this object.

no setter, inherited

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

Methods

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toString() → String

A string representation of this object.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Static Methods

defineArrowheadGeometry(String name, Object pathstr) → void

This static function defines a named arrowhead geometry. Once this is called one can use the name as a value for Shape#toArrow or Shape#fromArrow.

defineFigureGenerator(String name, Object func) → void

This static function defines a named figure geometry generator for Shapes. Once this is called one can use the name as a value for Shape#figure.

getArrowheadGeometries() → Map<String, Geometry>

This static function returns a read-only Map of named arrowhead geometries. The keys are arrowhead names. The values are Geometry objects.

getFigureGenerators() → Map<String, Object>

This static function returns a read-only Map of named geometry generators. The keys are figure names. The values are either string synonyms for other figure names, or functions that take a Shape and a width and a height and return a Geometry.