To begin working with custom shapes, you must be familiar with these:

• Familiarity with the Cartesian coordinate
• A knowledge of JavaScript

Start working with shapes

You are going to make your first shape. To visualize it better, let’s open a Cartesian coordinate editor. The maximum region for a shape is 200x200 (up to -100 left of the x = 0 line, up to 100 right of the x = 0, and vice versa. Let us try to make a north reference designator. For that, we need at least 5 component; 4 lines and 1 text. Before that, you must nest the shape in a function. After that, you can start calling the shape constructor.

const shape = new Shape()

Inside the shape, you will add a lot of add component functions, with the example being:

shape.addComponent(new Line(0,0,-50,-50))

If we visualize it on a graph, it will look like this.

There are more methods to tinker, being that:

• Point(x,y) which defines a point, and one of the most simplest shapes to play around with.
• Line(x1,y1,x2,y2) which defines a line between the first set of coordinates towards a second set of coordinates.
• Circle(x1,y1,x2,y2) which defines a circle relative from the first set of coordinate with the second set defining the radius
• Rectangle(x1,y1,x2,y2) which defines a rectangle, being the first set to define the top left most origin and the second set being to define the bottom right most endpoint.
• Measure(x1,y1,x2,y2) being the same concept as line, but it measures the distance around the first set and the second set.
• Arc(x1,y1,x2,y2,x3,y3) which defines an arc. First set being the origin define and the second set defining the radius and the third set which determines the angle of the arc.

Now, let’s continue. The full code should look like this:

const CreateNRefDesignator = () => {
    const shape = new Shape()
    shape.addComponent(new Line(0,0,0,100));
	shape.addComponent(new Line(0,0,25,50));
	shape.addComponent(new Line(0,0,-25,50));
	shape.addComponent(new Line(-25,50,0,50))
	shape.addComponent(new Line(25,50,0,50));
	shape.addComponent(new Label(0,0,'North'));
    return shape
}

in which you can call it as renderer.setModeShape(CreateNRefDesignator) in which now, you can place the shape as desired!