/** * @private */Ext.define('Ext.sparkline.VmlCanvas', { extend: 'Ext.sparkline.CanvasBase', setWidth: function(width) { var me = this; me.callParent(arguments); me.owner.groupEl.dom.coordsize = me.width + ' ' + (me.height || 0); me.owner.groupEl.dom.style.width = width + 'px'; }, setHeight: function(height) { var me = this; me.callParent(arguments); me.owner.groupEl.dom.coordsize = (me.width || 0) + ' ' + me.height; me.owner.groupEl.dom.style.height = height + 'px'; }, onOwnerUpdate: function() { var me = this; me.group = me.owner.groupEl; me.el = me.owner.element; me.prerender = []; }, _drawShape: function(shapeid, path, lineColor, fillColor, lineWidth) { var vpath = [], initial, stroke, fill, closed, plen, i; for (i = 0, plen = path.length; i < plen; i++) { vpath[i] = (path[i][0]) + ',' + (path[i][1]); } initial = vpath.splice(0, 1); lineWidth = lineWidth == null ? 1 : lineWidth; stroke = lineColor == null ? ' stroked="false" ' : ' strokeWeight="' + lineWidth + 'px" strokeColor="' + lineColor + '" '; fill = fillColor == null ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" '; closed = vpath[0] === vpath[vpath.length - 1] ? 'x ' : ''; return [ '<svml:shape coordorigin="0 0" coordsize="', this.pixelWidth, ' ', this.pixelHeight, '" id="jqsshape', shapeid, '" ', stroke, fill, ' style="position:absolute;height:', this.pixelHeight, 'px;width:', this.pixelWidth, 'px" ', ' path="m ', initial, ' l ', vpath.join(', '), ' ', closed, 'e"></svml:shape>' ].join(''); }, _drawCircle: function(shapeid, x, y, radius, lineColor, fillColor, lineWidth) { var circumference = radius * 2, stroke, fill; x -= radius; y -= radius; stroke = lineColor == null ? ' stroked="false" ' : ' strokeWeight="' + lineWidth + 'px" strokeColor="' + lineColor + '" '; fill = fillColor == null ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" '; return [ '<svml:oval id="jqsshape', shapeid, '" ', stroke, fill, ' style="position:absolute;top:', y, 'px; left:', x, 'px;width:', circumference, 'px;height:', circumference, 'px"></svml:oval>' ].join(''); }, _drawPieSlice: function(shapeid, x, y, radius, startAngle, endAngle, lineColor, fillColor) { var vpath, width = this.pixelWidth, height = this.pixelHeight, startx, starty, endx, endy, stroke, fill; stroke = lineColor == null ? ' stroked="false" ' : ' strokeWeight="1px" strokeColor="' + lineColor + '" '; fill = fillColor == null ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" '; // VML cannot handle start & end angle the same. if (startAngle === endAngle) { return ''; } if ((endAngle - startAngle) === (2 * Math.PI)) { // VML seems to have a problem when drawing a full circle that doesn't start 0 startAngle = 0.0; endAngle = (2 * Math.PI); } startx = x + Math.round(Math.cos(startAngle) * radius); starty = y + Math.round(Math.sin(startAngle) * radius); endx = x + Math.round(Math.cos(endAngle) * radius); endy = y + Math.round(Math.sin(endAngle) * radius); if (startx === endx && starty === endy) { if ((endAngle - startAngle) < Math.PI) { // Prevent very small slices from being mistaken as a whole pie return ''; } // essentially going to be the entire circle, so ignore startAngle startx = endx = x + radius; starty = endy = y; } if (startx === endx && starty === endy && (endAngle - startAngle) < Math.PI) { return ''; } vpath = [x - radius, y - radius, x + radius, y + radius, startx, starty, endx, endy]; return [ '<svml:shape coordorigin="0 0" coordsize="', width, ' ', height, '" id="jqsshape', shapeid, '" ', stroke, fill, ' style="position:absolute;height:', height, 'px;width:', width, 'px" path="m ', x, ',', y, ' wa ', vpath.join(', '), ' x e"></svml:shape>' ].join(''); }, _drawRect: function(shapeid, x, y, width, height, lineColor, fillColor) { return this._drawShape(shapeid, [[x, y], [x, y + height], [x + width, y + height], [x + width, y], [x, y]], lineColor, fillColor); }, reset: function() { Ext.fly(this.group).empty(); }, appendShape: function(shape) { this.prerender.push(this['_draw' + shape.type].apply(this, shape.args)); this.lastShapeId = shape.id; return shape.id; }, replaceWithShape: function(shapeid, shape) { var existing = this.el.getById('jqsshape' + shapeid, true), vel = this['_draw' + shape.type].apply(this, shape.args); existing.outerHTML = vel; }, replaceWithShapes: function(shapeids, shapes) { // replace the first shapeid with all the new shapes then toast the remaining old shapes var existing = this.el.getById('jqsshape' + shapeids[0], true), replace = '', slen = shapes.length, i; for (i = 0; i < slen; i++) { replace += this['_draw' + shapes[i].type].apply(this, shapes[i].args); } existing.outerHTML = replace; for (i = 1; i < shapeids.length; i++) { this.el.getById('jqsshape' + shapeids[i]).destroy(); } }, insertAfterShape: function(shapeid, shape) { var existing = this.el.getById('jqsshape' + shapeid, true), vel = this['_draw' + shape.type].apply(this, shape.args); existing.insertAdjacentHTML('afterEnd', vel); }, removeShapeId: function(shapeid) { var existing = this.el.getById('jqsshape' + shapeid, true); this.group.removeChild(existing); }, getShapeAt: function(x, y) { var shapeid = this.el.id.substr(8); return shapeid; }, render: function() { this.group.dom.innerHTML = this.prerender.join(''); }}, function() { Ext.onInternalReady(function() { var doc = document; if (doc.namespaces && !doc.namespaces.svml) { doc.namespaces.add("svml", "urn:schemas-microsoft-com:vml", '#default#VML'); } });});