Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dojox.gfx.canvas"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.gfx.canvas"] = true;
dojo.provide("dojox.gfx.canvas");

dojo.require("dojox.gfx._base");
dojo.require("dojox.gfx.shape");
dojo.require("dojox.gfx.path");
dojo.require("dojox.gfx.arc");
dojo.require("dojox.gfx.decompose");

dojo.experimental("dojox.gfx.canvas");

(function(){
        var g = dojox.gfx, gs = g.shape, ga = g.arc, 
                m = g.matrix, mp = m.multiplyPoint, twoPI = 2 * Math.PI;
        
        dojo.extend(g.Shape, {
                render: function(/* Object */ ctx){
                        // summary: render the shape
                        ctx.save();
                        this._renderTransform(ctx);
                        this._renderShape(ctx);
                        this._renderFill(ctx, true);
                        this._renderStroke(ctx, true);
                        ctx.restore();
                },
                _renderTransform: function(/* Object */ ctx){
                        if("canvasTransform" in this){
                                var t = this.canvasTransform;
                                ctx.translate(t.dx, t.dy);
                                ctx.rotate(t.angle2);
                                ctx.scale(t.sx, t.sy);
                                ctx.rotate(t.angle1);
                                // The future implementation when vendors catch up with the spec:
                                // var t = this.matrix;
                                // ctx.transform(t.xx, t.yx, t.xy, t.yy, t.dx, t.dy);
                        }
                },
                _renderShape: function(/* Object */ ctx){
                        // nothing
                },
                _renderFill: function(/* Object */ ctx, /* Boolean */ apply){
                        if("canvasFill" in this){
                                if("canvasFillImage" in this){
                                        this.canvasFill = ctx.createPattern(this.canvasFillImage, "repeat");
                                        delete this.canvasFillImage;
                                }
                                ctx.fillStyle = this.canvasFill;
                                if(apply){ ctx.fill(); }
                        }else{
                                ctx.fillStyle = "rgba(0,0,0,0.0)";
                        }
                },
                _renderStroke: function(/* Object */ ctx, /* Boolean */ apply){
                        var s = this.strokeStyle;
                        if(s){
                                ctx.strokeStyle = s.color.toString();
                                ctx.lineWidth = s.width;
                                ctx.lineCap = s.cap;
                                if(typeof s.join == "number"){
                                        ctx.lineJoin = "miter";
                                        ctx.miterLimit = s.join;
                                }else{
                                        ctx.lineJoin = s.join;
                                }
                                if(apply){ ctx.stroke(); }
                        }else if(!apply){
                                ctx.strokeStyle = "rgba(0,0,0,0.0)";
                        }
                },
                
                // events are not implemented
                getEventSource: function(){ return null; },
                connect:                function(){},
                disconnect:             function(){}
        });
        
        var modifyMethod = function(shape, method, extra){
                        var old = shape.prototype[method];
                        shape.prototype[method] = extra ?
                                function(){
                                        this.surface.makeDirty();
                                        old.apply(this, arguments);
                                        extra.call(this);
                                        return this;
                                } :
                                function(){
                                        this.surface.makeDirty();
                                        return old.apply(this, arguments);
                                };
                };

        modifyMethod(g.Shape, "setTransform",           
                function(){
                        // prepare Canvas-specific structures
                        if(this.matrix){
                                this.canvasTransform = g.decompose(this.matrix);
                        }else{
                                delete this.canvasTransform;
                        }
                });

        modifyMethod(g.Shape, "setFill",
                function(){
                        // prepare Canvas-specific structures
                        var fs = this.fillStyle, f;
                        if(fs){
                                if(typeof(fs) == "object" && "type" in fs){
                                        var ctx = this.surface.rawNode.getContext("2d");
                                        switch(fs.type){
                                                case "linear":
                                                case "radial":
                                                        f = fs.type == "linear" ? 
                                                                ctx.createLinearGradient(fs.x1, fs.y1, fs.x2, fs.y2) :
                                                                ctx.createRadialGradient(fs.cx, fs.cy, 0, fs.cx, fs.cy, fs.r);
                                                        dojo.forEach(fs.colors, function(step){
                                                                f.addColorStop(step.offset, g.normalizeColor(step.color).toString());
                                                        });
                                                        break;
                                                case "pattern":
                                                        var img = new Image(fs.width, fs.height);
                                                        this.surface.downloadImage(img, fs.src);
                                                        this.canvasFillImage = img;
                                        }
                                }else{
                                        // Set fill color using CSS RGBA func style
                                        f = fs.toString();
                                }
                                this.canvasFill = f;
                        }else{
                                delete this.canvasFill;
                        }
                });
        
        modifyMethod(g.Shape, "setStroke");
        modifyMethod(g.Shape, "setShape");
                
        dojo.declare("dojox.gfx.Group", g.Shape, {
                // summary: a group shape (Canvas), which can be used 
                //      to logically group shapes (e.g, to propagate matricies)
                constructor: function(){
                        gs.Container._init.call(this);
                },
                render: function(/* Object */ ctx){
                        // summary: render the group
                        ctx.save();
                        this._renderTransform(ctx);
                        this._renderFill(ctx);
                        this._renderStroke(ctx);
                        for(var i = 0; i < this.children.length; ++i){
                                this.children[i].render(ctx);
                        }
                        ctx.restore();
                }
        });

        dojo.declare("dojox.gfx.Rect", gs.Rect, {
                // summary: a rectangle shape (Canvas)
                _renderShape: function(/* Object */ ctx){
                        var s = this.shape, r = Math.min(s.r, s.height / 2, s.width / 2),
                                xl = s.x, xr = xl + s.width, yt = s.y, yb = yt + s.height,
                                xl2 = xl + r, xr2 = xr - r, yt2 = yt + r, yb2 = yb - r;
                        ctx.beginPath();
                        ctx.moveTo(xl2, yt);
                        ctx.lineTo(xr2, yt);
                        if(r){ ctx.arcTo(xr, yt, xr, yt2, r); }
                        ctx.lineTo(xr, yb2);
                        if(r){ ctx.arcTo(xr, yb, xr2, yb, r); }
                        ctx.lineTo(xl2, yb);
                        if(r){ ctx.arcTo(xl, yb, xl, yb2, r); }
                        ctx.lineTo(xl, yt2);
                        if(r){ ctx.arcTo(xl, yt, xl2, yt, r); }
                        ctx.closePath();
                }
        });
        
        var bezierCircle = [];
        (function(){
                var u = ga.curvePI4;
                bezierCircle.push(u.s, u.c1, u.c2, u.e);
                for(var a = 45; a < 360; a += 45){
                        var r = m.rotateg(a);
                        bezierCircle.push(mp(r, u.c1), mp(r, u.c2), mp(r, u.e));
                }
        })();
        
        dojo.declare("dojox.gfx.Ellipse", gs.Ellipse, {
                // summary: an ellipse shape (Canvas)
                setShape: function(){
                        g.Ellipse.superclass.setShape.apply(this, arguments);
                        // prepare Canvas-specific structures
                        var s = this.shape, t, c1, c2, r = [],
                                M = m.normalize([m.translate(s.cx, s.cy), m.scale(s.rx, s.ry)]);
                        t = mp(M, bezierCircle[0]);
                        r.push([t.x, t.y]);
                        for(var i = 1; i < bezierCircle.length; i += 3){
                                c1 = mp(M, bezierCircle[i]);
                                c2 = mp(M, bezierCircle[i + 1]);
                                t  = mp(M, bezierCircle[i + 2]);
                                r.push([c1.x, c1.y, c2.x, c2.y, t.x, t.y]);
                        }
                        this.canvasEllipse = r;
                        return this;
                },
                _renderShape: function(/* Object */ ctx){
                        var r = this.canvasEllipse;
                        ctx.beginPath();
                        ctx.moveTo.apply(ctx, r[0]);
                        for(var i = 1; i < r.length; ++i){
                                ctx.bezierCurveTo.apply(ctx, r[i]);
                        }
                        ctx.closePath();
                }
        });

        dojo.declare("dojox.gfx.Circle", gs.Circle, {
                // summary: a circle shape (Canvas)
                _renderShape: function(/* Object */ ctx){
                        var s = this.shape;
                        ctx.beginPath();
                        ctx.arc(s.cx, s.cy, s.r, 0, twoPI, 1);
                }
        });

        dojo.declare("dojox.gfx.Line", gs.Line, {
                // summary: a line shape (Canvas)
                _renderShape: function(/* Object */ ctx){
                        var s = this.shape;
                        ctx.beginPath();
                        ctx.moveTo(s.x1, s.y1);
                        ctx.lineTo(s.x2, s.y2);
                }
        });

        dojo.declare("dojox.gfx.Polyline", gs.Polyline, {
                // summary: a polyline/polygon shape (Canvas)
                setShape: function(){
                        g.Polyline.superclass.setShape.apply(this, arguments);
                        // prepare Canvas-specific structures
                        var p = this.shape.points, f = p[0], r = [], c, i;
                        if(p.length){
                                if(typeof f == "number"){
                                        r.push(f, p[1]);
                                        i = 2;
                                }else{
                                        r.push(f.x, f.y);
                                        i = 1;
                                }
                                for(; i < p.length; ++i){
                                        c = p[i];
                                        if(typeof c == "number"){
                                                r.push(c, p[++i]);
                                        }else{
                                                r.push(c.x, c.y);
                                        }
                                }
                        }
                        this.canvasPolyline = r;
                        return this;
                },
                _renderShape: function(/* Object */ ctx){
                        var p = this.canvasPolyline;
                        if(p.length){
                                ctx.beginPath();
                                ctx.moveTo(p[0], p[1]);
                                for(var i = 2; i < p.length; i += 2){
                                        ctx.lineTo(p[i], p[i + 1]);
                                }
                        }
                }
        });
        
        dojo.declare("dojox.gfx.Image", gs.Image, {
                // summary: an image shape (Canvas)
                setShape: function(){
                        g.Image.superclass.setShape.apply(this, arguments);
                        // prepare Canvas-specific structures
                        var img = new Image();
                        this.surface.downloadImage(img, this.shape.src);
                        this.canvasImage = img;
                        return this;
                },
                _renderShape: function(/* Object */ ctx){
                        var s = this.shape;
                        ctx.drawImage(this.canvasImage, s.x, s.y, s.width, s.height);
                }
        });
        
        dojo.declare("dojox.gfx.Text", gs.Text, {
                // summary: a text shape (Canvas)
                _renderShape: function(/* Object */ ctx){
                        var s = this.shape;
                        // nothing for the moment
                }
        });
        modifyMethod(g.Text, "setFont");
        
        var pathRenderers = {
                M: "_moveToA", m: "_moveToR", 
                L: "_lineToA", l: "_lineToR", 
                H: "_hLineToA", h: "_hLineToR", 
                V: "_vLineToA", v: "_vLineToR", 
                C: "_curveToA", c: "_curveToR", 
                S: "_smoothCurveToA", s: "_smoothCurveToR", 
                Q: "_qCurveToA", q: "_qCurveToR", 
                T: "_qSmoothCurveToA", t: "_qSmoothCurveToR", 
                A: "_arcTo", a: "_arcTo", 
                Z: "_closePath", z: "_closePath"
        };
        
        dojo.declare("dojox.gfx.Path", g.path.Path, {
                // summary: a path shape (Canvas)
                constructor: function(){
                        this.last = {};
                        this.lastControl = {};
                },
                setShape: function(){
                        this.canvasPath = [];
                        return g.Path.superclass.setShape.apply(this, arguments);
                },
                _updateWithSegment: function(segment){
                        var last = dojo.clone(this.last);
                        this[pathRenderers[segment.action]](this.canvasPath, segment.action, segment.args);
                        this.last = last;
                        g.Path.superclass._updateWithSegment.apply(this, arguments);
                },
                _renderShape: function(/* Object */ ctx){
                        var r = this.canvasPath;
                        ctx.beginPath();
                        for(var i = 0; i < r.length; i += 2){
                                ctx[r[i]].apply(ctx, r[i + 1]);
                        }
                },
                _moveToA: function(result, action, args){
                        result.push("moveTo", [args[0], args[1]]);
                        for(var i = 2; i < args.length; i += 2){
                                result.push("lineTo", [args[i], args[i + 1]]);
                        }
                        this.last.x = args[args.length - 2];
                        this.last.y = args[args.length - 1];
                        this.lastControl = {};
                },
                _moveToR: function(result, action, args){
                        if("x" in this.last){
                                result.push("moveTo", [this.last.x += args[0], this.last.y += args[1]]);
                        }else{
                                result.push("moveTo", [this.last.x = args[0], this.last.y = args[1]]);
                        }
                        for(var i = 2; i < args.length; i += 2){
                                result.push("lineTo", [this.last.x += args[i], this.last.y += args[i + 1]]);
                        }
                        this.lastControl = {};
                },
                _lineToA: function(result, action, args){
                        for(var i = 0; i < args.length; i += 2){
                                result.push("lineTo", [args[i], args[i + 1]]);
                        }
                        this.last.x = args[args.length - 2];
                        this.last.y = args[args.length - 1];
                        this.lastControl = {};
                },
                _lineToR: function(result, action, args){
                        for(var i = 0; i < args.length; i += 2){
                                result.push("lineTo", [this.last.x += args[i], this.last.y += args[i + 1]]);
                        }
                        this.lastControl = {};
                },
                _hLineToA: function(result, action, args){
                        for(var i = 0; i < args.length; ++i){
                                result.push("lineTo", [args[i], this.last.y]);
                        }
                        this.last.x = args[args.length - 1];
                        this.lastControl = {};
                },
                _hLineToR: function(result, action, args){
                        for(var i = 0; i < args.length; ++i){
                                result.push("lineTo", [this.last.x += args[i], this.last.y]);
                        }
                        this.lastControl = {};
                },
                _vLineToA: function(result, action, args){
                        for(var i = 0; i < args.length; ++i){
                                result.push("lineTo", [this.last.x, args[i]]);
                        }
                        this.last.y = args[args.length - 1];
                        this.lastControl = {};
                },
                _vLineToR: function(result, action, args){
                        for(var i = 0; i < args.length; ++i){
                                result.push("lineTo", [this.last.x, this.last.y += args[i]]);
                        }
                        this.lastControl = {};
                },
                _curveToA: function(result, action, args){
                        for(var i = 0; i < args.length; i += 6){
                                result.push("bezierCurveTo", args.slice(i, i + 6));
                        }
                        this.last.x = args[args.length - 2];
                        this.last.y = args[args.length - 1];
                        this.lastControl.x = args[args.length - 4];
                        this.lastControl.y = args[args.length - 3];
                        this.lastControl.type = "C";
                },
                _curveToR: function(result, action, args){
                        for(var i = 0; i < args.length; i += 6){
                                result.push("bezierCurveTo", [
                                        this.last.x + args[i], 
                                        this.last.y + args[i + 1], 
                                        this.lastControl.x = this.last.x + args[i + 2], 
                                        this.lastControl.y = this.last.y + args[i + 3], 
                                        this.last.x + args[i + 4], 
                                        this.last.y + args[i + 5]
                                ]);
                                this.last.x += args[i + 4];
                                this.last.y += args[i + 5];
                        }
                        this.lastControl.type = "C";
                },
                _smoothCurveToA: function(result, action, args){
                        for(var i = 0; i < args.length; i += 4){
                                var valid = this.lastControl.type == "C";
                                result.push("bezierCurveTo", [
                                        valid ? 2 * this.last.x - this.lastControl.x : this.last.x, 
                                        valid ? 2 * this.last.y - this.lastControl.y : this.last.y, 
                                        args[i], 
                                        args[i + 1], 
                                        args[i + 2], 
                                        args[i + 3]
                                ]);
                                this.lastControl.x = args[i];
                                this.lastControl.y = args[i + 1];
                                this.lastControl.type = "C";
                        }
                        this.last.x = args[args.length - 2];
                        this.last.y = args[args.length - 1];
                },
                _smoothCurveToR: function(result, action, args){
                        for(var i = 0; i < args.length; i += 4){
                                var valid = this.lastControl.type == "C";
                                result.push("bezierCurveTo", [
                                        valid ? 2 * this.last.x - this.lastControl.x : this.last.x, 
                                        valid ? 2 * this.last.y - this.lastControl.y : this.last.y, 
                                        this.last.x + args[i], 
                                        this.last.y + args[i + 1], 
                                        this.last.x + args[i + 2], 
                                        this.last.y + args[i + 3]
                                ]);
                                this.lastControl.x = this.last.x + args[i];
                                this.lastControl.y = this.last.y + args[i + 1];
                                this.lastControl.type = "C";
                                this.last.x += args[i + 2];
                                this.last.y += args[i + 3];
                        }
                },
                _qCurveToA: function(result, action, args){
                        for(var i = 0; i < args.length; i += 4){
                                result.push("quadraticCurveTo", args.slice(i, i + 4));
                        }
                        this.last.x = args[args.length - 2];
                        this.last.y = args[args.length - 1];
                        this.lastControl.x = args[args.length - 4];
                        this.lastControl.y = args[args.length - 3];
                        this.lastControl.type = "Q";
                },
                _qCurveToR: function(result, action, args){
                        for(var i = 0; i < args.length; i += 4){
                                result.push("quadraticCurveTo", [
                                        this.lastControl.x = this.last.x + args[i], 
                                        this.lastControl.y = this.last.y + args[i + 1], 
                                        this.last.x + args[i + 2], 
                                        this.last.y + args[i + 3]
                                ]);
                                this.last.x += args[i + 2];
                                this.last.y += args[i + 3];
                        }
                        this.lastControl.type = "Q";
                },
                _qSmoothCurveToA: function(result, action, args){
                        for(var i = 0; i < args.length; i += 2){
                                var valid = this.lastControl.type == "Q";
                                result.push("quadraticCurveTo", [
                                        this.lastControl.x = valid ? 2 * this.last.x - this.lastControl.x : this.last.x, 
                                        this.lastControl.y = valid ? 2 * this.last.y - this.lastControl.y : this.last.y, 
                                        args[i], 
                                        args[i + 1]
                                ]);
                                this.lastControl.type = "Q";
                        }
                        this.last.x = args[args.length - 2];
                        this.last.y = args[args.length - 1];
                },
                _qSmoothCurveToR: function(result, action, args){
                        for(var i = 0; i < args.length; i += 2){
                                var valid = this.lastControl.type == "Q";
                                result.push("quadraticCurveTo", [
                                        this.lastControl.x = valid ? 2 * this.last.x - this.lastControl.x : this.last.x, 
                                        this.lastControl.y = valid ? 2 * this.last.y - this.lastControl.y : this.last.y, 
                                        this.last.x + args[i], 
                                        this.last.y + args[i + 1]
                                ]);
                                this.lastControl.type = "Q";
                                this.last.x += args[i];
                                this.last.y += args[i + 1];
                        }
                },
                _arcTo: function(result, action, args){
                        var relative = action == "a";
                        for(var i = 0; i < args.length; i += 7){
                                var x1 = args[i + 5], y1 = args[i + 6];
                                if(relative){
                                        x1 += this.last.x;
                                        y1 += this.last.y;
                                }
                                var arcs = ga.arcAsBezier(
                                        this.last, args[i], args[i + 1], args[i + 2], 
                                        args[i + 3] ? 1 : 0, args[i + 4] ? 1 : 0,
                                        x1, y1
                                );
                                dojo.forEach(arcs, function(p){
                                        result.push("bezierCurveTo", p);
                                });
                                this.last.x = x1;
                                this.last.y = y1;
                        }
                        this.lastControl = {};
                },
                _closePath: function(result, action, args){
                        result.push("closePath", []);
                        this.lastControl = {};
                }
        });
        dojo.forEach(["moveTo", "lineTo", "hLineTo", "vLineTo", "curveTo", 
                "smoothCurveTo", "qCurveTo", "qSmoothCurveTo", "arcTo", "closePath"], 
                function(method){ modifyMethod(g.Path, method); }
        );

        dojo.declare("dojox.gfx.TextPath", g.path.TextPath, {
                // summary: a text shape (Canvas)
                _renderShape: function(/* Object */ ctx){
                        var s = this.shape;
                        // nothing for the moment
                }
        });
        
        dojo.declare("dojox.gfx.Surface", gs.Surface, {
                // summary: a surface object to be used for drawings (Canvas)
                constructor: function(){
                        gs.Container._init.call(this);
                        this.pendingImageCount = 0;
                        this.makeDirty();
                },
                setDimensions: function(width, height){
                        // summary: sets the width and height of the rawNode
                        // width: String: width of surface, e.g., "100px"
                        // height: String: height of surface, e.g., "100px"
                        this.width  = g.normalizedLength(width);        // in pixels
                        this.height = g.normalizedLength(height);       // in pixels
                        if(!this.rawNode) return this;
                        this.rawNode.width = width;
                        this.rawNode.height = height;
                        this.makeDirty();
                        return this;    // self
                },
                getDimensions: function(){
                        // summary: returns an object with properties "width" and "height"
                        return this.rawNode ? {width:  this.rawNode.width, height: this.rawNode.height} : null; // Object
                },
                render: function(){
                        // summary: render the all shapes
                        if(this.pendingImageCount){ return; }
                        var ctx = this.rawNode.getContext("2d");
                        ctx.save();
                        ctx.clearRect(0, 0, this.rawNode.width, this.rawNode.height);
                        for(var i = 0; i < this.children.length; ++i){
                                this.children[i].render(ctx);
                        }
                        ctx.restore();
                        if("pendingRender" in this){
                                clearTimeout(this.pendingRender);
                                delete this.pendingRender;
                        }
                },
                makeDirty: function(){
                        // summary: internal method, which is called when we may need to redraw
                        if(!this.pendingImagesCount && !("pendingRender" in this)){
                                this.pendingRender = setTimeout(dojo.hitch(this, this.render), 0);
                        }
                },
                downloadImage: function(img, url){
                        // summary: 
                        //              internal method, which starts an image download and renders, when it is ready
                        // img: Image:
                        //              the image object
                        // url: String:
                        //              the url of the image
                        var handler = dojo.hitch(this, this.onImageLoad);
                        if(!this.pendingImageCount++ && "pendingRender" in this){
                                clearTimeout(this.pendingRender);
                                delete this.pendingRender;
                        }
                        img.onload  = handler;
                        img.onerror = handler;
                        img.onabort = handler;
                        img.src = url;
                },
                onImageLoad: function(){
                        if(!--this.pendingImageCount){ this.render(); }
                },

                // events are not implemented
                getEventSource: function(){ return null; },
                connect:                function(){},
                disconnect:             function(){}
        });

        g.createSurface = function(parentNode, width, height){
                // summary: creates a surface (Canvas)
                // parentNode: Node: a parent node
                // width: String: width of surface, e.g., "100px"
                // height: String: height of surface, e.g., "100px"

                if(!width){ width = "100%"; }
                if(!height){ height = "100%"; }
                var s = new g.Surface(),
                        p = dojo.byId(parentNode),
                        c = p.ownerDocument.createElement("canvas");
                c.width  = width;
                c.height = height;
                p.appendChild(c);
                s.rawNode = c;
                s.surface = s;
                return s;       // dojox.gfx.Surface
        };
        
        // Extenders
        
        var C = gs.Container, Container = {
                add: function(shape){
                        this.surface.makeDirty();
                        return C.add.apply(this, arguments);
                },
                remove: function(shape, silently){
                        this.surface.makeDirty();
                        return C.remove.apply(this, arguments);
                },
                clear: function(){
                        this.surface.makeDirty();
                        return C.clear.apply(this, arguments);
                },
                _moveChildToFront: function(shape){
                        this.surface.makeDirty();
                        return C._moveChildToFront.apply(this, arguments);
                },
                _moveChildToBack: function(shape){
                        this.surface.makeDirty();
                        return C._moveChildToBack.apply(this, arguments);
                }
        };

        dojo.mixin(gs.Creator, {
                // summary: Canvas shape creators
                createObject: function(shapeType, rawShape) {
                        // summary: creates an instance of the passed shapeType class
                        // shapeType: Function: a class constructor to create an instance of
                        // rawShape: Object: properties to be passed in to the classes "setShape" method
                        // overrideSize: Boolean: set the size explicitly, if true
                        var shape = new shapeType();
                        shape.surface = this.surface;
                        shape.setShape(rawShape);
                        this.add(shape);
                        return shape;   // dojox.gfx.Shape
                }
        });

        dojo.extend(g.Group, Container);
        dojo.extend(g.Group, gs.Creator);

        dojo.extend(g.Surface, Container);
        dojo.extend(g.Surface, gs.Creator);
})();

}