JSXGraph and AMD

Version 0.97 introduces module definitions as defined by the AMD API. This only enforces the module and namespace pattern we were using in JSXGraph for years.

Do I have to change my code?

In most cases: No. We made these changes with backwards compatibility in mind. Just load your copy of jsxgraphcore.js or – if you want to debug your construction or patch JSXGraph – loadjsxgraph.js. They will behave like before and load all modules synchronously.

The (hopefully) only thing that changes is the definition of a theme or when you change/patch internal structures of JSXGraph. If you created your own theme you problably merge our JXG.Options object with your changes using JXG.deepCopy():

    JXG.Options = JXG.deepCopy(JXG.Options, {...});

From 0.97 on you’ll have to use JXG.merge():

    JXG.Options = JXG.merge(JXG.Options, {...});

The difference between these methods is that deepCopy() merges the contents of the second parameter into a copy of the first parameter. merge() merge the contents of the second parameter directly into the first parameter and returns the reference to the first parameter. So,

    JXG.merge(JXG.Options, {...});

will have the same effect as the other merge() example above.

The problem is, the base/board module depends on the options module that returns a reference to JXG.Options. That means that the board module holds a reference to our original options object even if you substitute it from outside:

    JXG.Options = {};

JSXGraph will still work and use our default options. So, if you manipulate the internal structures from the outside, make sure you don’t change the references.

What is it good for?

Now we have a strict definition of a module and a module’s dependencies. Using an AMD loader like require.js enables us to resolve all dependencies automatically.

How can I use it?

You’ll need require.js (should work with any another amd loader, too):

    <script type="text/javascript" src="require.js"></script>

Configure requirejs, define dependencies and create your construction:

    require.config({ baseUrl: "path/to/JSXGraph/src/" }); 
    require(['jsxgraph', 'base/line', 'base/curve'], 
    function (JSXGraph, Line, Plot) { 
        var board = JSXGraph.initBoard('box', {...}), 
            p = board.create('plot', [Math.sin]); 
    });