Custom Shapes

You can also pass custom functions to the shape property, instead of using one of the predefined functions. This allows you to create your own custom shapes.

A shape function calculates and returns a callback. That callback function should accept a percentage (between 0 and 1) that represents where on the shape to place an individual element, and return a position object in the format: {x: 0, y: 0}.

Here's an example that draws a line from top-left to bottom-right. For the sake of simplicity, we'll ignore the config parameter - just know you can use that to define shape functions that are configurable based on passed configuration parameters.

export default function diagonalLine(config = null, containerSize = {width: 0, height: 0}) {
    /**
     * Return a function that can position a point of any given percentage (0-1) along the line
     */
    return (percentage) => {
        return {
            x: percentage * containerSize.width,
            y: percentage * containerSize.height
        };
    }
}