shapeContainer

Component that wraps DOM elements and accepts parameters to absolutely position them on-screen. All parameters for the shapeContainer element are passed within a single config property.

config

At a glance, the configuration property includes the following parameters:

const config = {
    shape: `string|function`,    
    shapeParameters: `object`
}

shape : string | function

What shape function to use to position the elements on the screen. Can pass one of the pre-built shapes, or a custom function (see Custom Shapes). Defaults to line.

Possible values:

Value	Description
"line"	Draw the elements using the built-in Line function.
"circle"	Draw the elements using the built-in Circle function.
"arc"	Draw the elements using the built-in Arc function.
()=>{}	Use your own custom function.

---

shapeParameters : object

An object representing the parameters to send to the chosen shape function. See the reference for the above shape functions to determine the structure of each of their payloads.

Note that values passed to position/sizing parameters can use regular pixel values, or percentage values that are relative to this container. For example, if a parameter width is set to 50%, the shape will have a width of 50% of this container.