Home

This repository contains a prototype implementation of GFX, the portable 2D JavaScript graphics library, based on Dojo 2.0. The starting point of this code is the dojox/gfx module from Dojo 1.9, and it will evolve until the Dojo 2.0 release. This wiki will describe the updates as they are implemented.

Dependencies and Installation

The GFX library code uses the Dojo core and also (for now) some Dojox legacy modules. In addition, the tests and demos use Dijit widgets and the DOH framework. So the directory structure should look like the following:

parentDir
    dijit                    Dojo widgets (for tests/demos)
    dojo                     Dojo core
    dojox                    (see below)
    gfx                      this repository
    util
        doh                  DOH test framework (for tests/demos)

Uses of legacy DojoX Modules

The GFX library code has the following dependencies:

• gfx/_gfxBidiSupport requires dojox/string/BidiEngine,
• gfx/VectorText (likely to be removed in 2.0) requires dojox/html/metrics and dojox/xml/DomParser.

So, applications not using these 2 modules are already completely independent of legacy dojox code.

In addition, some performance tests require dojox/charting (and, indirectly, the legacy dojox/gfx) to display results.

Current Status

Namespace

• The gfx namespace is changed to the toplevel gfx namespace.

Unsupporting some renderers

• The VML, and Silverlight renderers have been removed, as well as the SVGWeb support in the SVG renderer.

Full AMD-fication

• All demos and tests have been converted to AMD loader syntax and HTML5 compliant attributes (data-dojo-*).
• Each shape class is now in its own AMD module in the shape/ directory, for example, gfx/shape/Shape.js, gfx/shape/Rect.js etc.
• Each renderer has its own subdirectory containing the shape subclasses, for example gfx/svg/Shape.js, gfx/svg/Rect.js, etc.
• The shape.js, svg.js, canvas.js and canvasWithEvents.js modules are still here for compatibility, now they simply require all the corresponding shape classes.

No Globals / Using several renderers

• Up to Dojo 1.9, the mechanism to use a given renderer is based on setting class and function pointers as properties of the dojox/gfx module object, for example the gfx.createSurface function, the gfx.Rect class, etc. It is possible to switch from a renderer to another using gfx.switchTo(), but this will be a global change since there is only one instance of the dojox/gfx module loaded in a given JavaScript context.
• This is now changed as follows.
  • Each renderer defines a Surface class, which can be instantiated without using a global function. For example:

        require(["gfx/svg/Surface"], function(Surface) {
            new Surface("surface_div", 500, 400);
        });

• The renderer-specific Surface classes can then be used to create shapes using the existing createRect etc. functions.
• There is also a new generic gfx/Surface class available, which requires the renderer-specific Surface class specified by the "gfx-renderer" has flag. For example:

    <script type="text/javascript" src="../../dojo/dojo.js"
		data-dojo-config="has:{'gfx-renderer':'canvas'}"></script>
...
        require(["gfx/Surface"], function(Surface) {
            new Surface("surface_div", 500, 400);
        });