Extension

Because of the dynamic of JavaScript JSXGraph can easily be extended without touching the project's source files.

Triangle

For a very simple example we will implement a simple triangle. This example is extremely minimal and uses only two methods which are required by every geometry element in JSXGraph: One function is written to create the element and one is invoked to register the element in JSXGraph.

Create-function

This create function is used to construct a geometry element based on given parent elements. The function's definition is the same for every geometry element. It takes three parameters board, parents, attributes and returns the created object or an object which members are the created objects.

• board is a reference to the JXG.Board the parents are on and the geometry element shall be put on,
• parents is an array of parent elements which define the element to construct,
• attributes define the look and feel of the element e.g. colors or if a point shall be fixed or free.

E.g.

JXG.createTriangle = function(board, parents, attributes) [...]

Note: The function doesn't have to be placed in the JXG namespace.

...to be continued...

Register-method

The JSX.JSXGraph singleton has a method called registerElement which takes two parameters element and creator:

<static> JXG.JSXGraph.registerElement(element, creator)

• Element is a identification string like the strings passed in the first parameter of the create method, e.g. 'point', 'circle' or 'polygon'. For our triangle we'll choose 'triangle',
• creator is a reference to the create-function for the geometry element. In case of our example it is JXG.createTriangle.

JXG.JSXGraph.registerElement('triangle', JXG.createTriangle);

The complete example code

JXG.createTriangle = function(board, parents, attributes) {
    if(JXG.IsPoint(parents[0]) && JXG.IsPoint(parents[1]) && JXG.IsPoint(parents[2])) {
        var p1 = parents[0], p2 = parents[1], p3 = parents[2];
        var l1, l2, l3;

        if(!JXG.exists(attributes))
            attributes = {};

        attributes.straightFirst = false;
        attributes.straightLast = false;

        l1 = board.create('line', [p1, p2], attributes);
        l2 = board.create('line', [p2, p3], attributes);
        l3 = board.create('line', [p3, p1], attributes);

        var g = new JXG.Group(board);
        g.addPoints([p1, p2, p3]);

        return new JXG.Composition({A: p1, B: p2, C: p3, a: l3, b: l1, c: l2, G: g});
    } else {
        throw ("Can't create triangle with parent types '" + (typeof parents[0]) + "' and '" + (typeof parents[1]) + "' and '" + (typeof parents[2]) + "'.");    
    }
};

JXG.JSXGraph.registerElement('triangle', JXG.createTriangle);