diff options
Diffstat (limited to 'includes/js/dojox/gfx/canvas.js')
| -rw-r--r-- | includes/js/dojox/gfx/canvas.js | 687 |
1 files changed, 0 insertions, 687 deletions
diff --git a/includes/js/dojox/gfx/canvas.js b/includes/js/dojox/gfx/canvas.js deleted file mode 100644 index 6872b2f..0000000 --- a/includes/js/dojox/gfx/canvas.js +++ /dev/null @@ -1,687 +0,0 @@ -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, pi = Math.PI, twoPI = 2 * pi, halfPI = pi /2; - - 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); - if(r){ - ctx.arc(xr2, yt2, r, -halfPI, 0, false); - ctx.arc(xr2, yb2, r, 0, halfPI, false); - ctx.arc(xl2, yb2, r, halfPI, pi, false); - ctx.arc(xl2, yt2, r, pi, halfPI, false); - }else{ - ctx.lineTo(xr2, yt); - ctx.lineTo(xr, yb2); - ctx.lineTo(xl2, yb); - ctx.lineTo(xl, yt2); - } - 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); - // dojo.inherited("setShape", 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){ - // console.debug("Polyline::_renderShape"); - 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); -})(); - -} |