| /* Flot plugin for drawing all elements of a plot on the canvas. |
| |
| Copyright (c) 2007-2014 IOLA and Ole Laursen. |
| Licensed under the MIT license. |
| |
| Flot normally produces certain elements, like axis labels and the legend, using |
| HTML elements. This permits greater interactivity and customization, and often |
| looks better, due to cross-browser canvas text inconsistencies and limitations. |
| |
| It can also be desirable to render the plot entirely in canvas, particularly |
| if the goal is to save it as an image, or if Flot is being used in a context |
| where the HTML DOM does not exist, as is the case within Node.js. This plugin |
| switches out Flot's standard drawing operations for canvas-only replacements. |
| |
| Currently the plugin supports only axis labels, but it will eventually allow |
| every element of the plot to be rendered directly to canvas. |
| |
| The plugin supports these options: |
| |
| { |
| canvas: boolean |
| } |
| |
| The "canvas" option controls whether full canvas drawing is enabled, making it |
| possible to toggle on and off. This is useful when a plot uses HTML text in the |
| browser, but needs to redraw with canvas text when exporting as an image. |
| |
| */ |
| |
| (function($) { |
| |
| var options = { |
| canvas: true |
| }; |
| |
| var render, getTextInfo, addText; |
| |
| // Cache the prototype hasOwnProperty for faster access |
| |
| var hasOwnProperty = Object.prototype.hasOwnProperty; |
| |
| function init(plot, classes) { |
| |
| var Canvas = classes.Canvas; |
| |
| // We only want to replace the functions once; the second time around |
| // we would just get our new function back. This whole replacing of |
| // prototype functions is a disaster, and needs to be changed ASAP. |
| |
| if (render == null) { |
| getTextInfo = Canvas.prototype.getTextInfo, |
| addText = Canvas.prototype.addText, |
| render = Canvas.prototype.render; |
| } |
| |
| // Finishes rendering the canvas, including overlaid text |
| |
| Canvas.prototype.render = function() { |
| |
| if (!plot.getOptions().canvas) { |
| return render.call(this); |
| } |
| |
| var context = this.context, |
| cache = this._textCache; |
| |
| // For each text layer, render elements marked as active |
| |
| context.save(); |
| context.textBaseline = "middle"; |
| |
| for (var layerKey in cache) { |
| if (hasOwnProperty.call(cache, layerKey)) { |
| var layerCache = cache[layerKey]; |
| for (var styleKey in layerCache) { |
| if (hasOwnProperty.call(layerCache, styleKey)) { |
| var styleCache = layerCache[styleKey], |
| updateStyles = true; |
| for (var key in styleCache) { |
| if (hasOwnProperty.call(styleCache, key)) { |
| |
| var info = styleCache[key], |
| positions = info.positions, |
| lines = info.lines; |
| |
| // Since every element at this level of the cache have the |
| // same font and fill styles, we can just change them once |
| // using the values from the first element. |
| |
| if (updateStyles) { |
| context.fillStyle = info.font.color; |
| context.font = info.font.definition; |
| updateStyles = false; |
| } |
| |
| for (var i = 0, position; position = positions[i]; i++) { |
| if (position.active) { |
| for (var j = 0, line; line = position.lines[j]; j++) { |
| context.fillText(lines[j].text, line[0], line[1]); |
| } |
| } else { |
| positions.splice(i--, 1); |
| } |
| } |
| |
| if (positions.length == 0) { |
| delete styleCache[key]; |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| context.restore(); |
| }; |
| |
| // Creates (if necessary) and returns a text info object. |
| // |
| // When the canvas option is set, the object looks like this: |
| // |
| // { |
| // width: Width of the text's bounding box. |
| // height: Height of the text's bounding box. |
| // positions: Array of positions at which this text is drawn. |
| // lines: [{ |
| // height: Height of this line. |
| // widths: Width of this line. |
| // text: Text on this line. |
| // }], |
| // font: { |
| // definition: Canvas font property string. |
| // color: Color of the text. |
| // }, |
| // } |
| // |
| // The positions array contains objects that look like this: |
| // |
| // { |
| // active: Flag indicating whether the text should be visible. |
| // lines: Array of [x, y] coordinates at which to draw the line. |
| // x: X coordinate at which to draw the text. |
| // y: Y coordinate at which to draw the text. |
| // } |
| |
| Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) { |
| |
| if (!plot.getOptions().canvas) { |
| return getTextInfo.call(this, layer, text, font, angle, width); |
| } |
| |
| var textStyle, layerCache, styleCache, info; |
| |
| // Cast the value to a string, in case we were given a number |
| |
| text = "" + text; |
| |
| // If the font is a font-spec object, generate a CSS definition |
| |
| if (typeof font === "object") { |
| textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family; |
| } else { |
| textStyle = font; |
| } |
| |
| // Retrieve (or create) the cache for the text's layer and styles |
| |
| layerCache = this._textCache[layer]; |
| |
| if (layerCache == null) { |
| layerCache = this._textCache[layer] = {}; |
| } |
| |
| styleCache = layerCache[textStyle]; |
| |
| if (styleCache == null) { |
| styleCache = layerCache[textStyle] = {}; |
| } |
| |
| info = styleCache[text]; |
| |
| if (info == null) { |
| |
| var context = this.context; |
| |
| // If the font was provided as CSS, create a div with those |
| // classes and examine it to generate a canvas font spec. |
| |
| if (typeof font !== "object") { |
| |
| var element = $("<div> </div>") |
| .css("position", "absolute") |
| .addClass(typeof font === "string" ? font : null) |
| .appendTo(this.getTextLayer(layer)); |
| |
| font = { |
| lineHeight: element.height(), |
| style: element.css("font-style"), |
| variant: element.css("font-variant"), |
| weight: element.css("font-weight"), |
| family: element.css("font-family"), |
| color: element.css("color") |
| }; |
| |
| // Setting line-height to 1, without units, sets it equal |
| // to the font-size, even if the font-size is abstract, |
| // like 'smaller'. This enables us to read the real size |
| // via the element's height, working around browsers that |
| // return the literal 'smaller' value. |
| |
| font.size = element.css("line-height", 1).height(); |
| |
| element.remove(); |
| } |
| |
| textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family; |
| |
| // Create a new info object, initializing the dimensions to |
| // zero so we can count them up line-by-line. |
| |
| info = styleCache[text] = { |
| width: 0, |
| height: 0, |
| positions: [], |
| lines: [], |
| font: { |
| definition: textStyle, |
| color: font.color |
| } |
| }; |
| |
| context.save(); |
| context.font = textStyle; |
| |
| // Canvas can't handle multi-line strings; break on various |
| // newlines, including HTML brs, to build a list of lines. |
| // Note that we could split directly on regexps, but IE < 9 is |
| // broken; revisit when we drop IE 7/8 support. |
| |
| var lines = (text + "").replace(/<br ?\/?>|\r\n|\r/g, "\n").split("\n"); |
| |
| for (var i = 0; i < lines.length; ++i) { |
| |
| var lineText = lines[i], |
| measured = context.measureText(lineText); |
| |
| info.width = Math.max(measured.width, info.width); |
| info.height += font.lineHeight; |
| |
| info.lines.push({ |
| text: lineText, |
| width: measured.width, |
| height: font.lineHeight |
| }); |
| } |
| |
| context.restore(); |
| } |
| |
| return info; |
| }; |
| |
| // Adds a text string to the canvas text overlay. |
| |
| Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) { |
| |
| if (!plot.getOptions().canvas) { |
| return addText.call(this, layer, x, y, text, font, angle, width, halign, valign); |
| } |
| |
| var info = this.getTextInfo(layer, text, font, angle, width), |
| positions = info.positions, |
| lines = info.lines; |
| |
| // Text is drawn with baseline 'middle', which we need to account |
| // for by adding half a line's height to the y position. |
| |
| y += info.height / lines.length / 2; |
| |
| // Tweak the initial y-position to match vertical alignment |
| |
| if (valign == "middle") { |
| y = Math.round(y - info.height / 2); |
| } else if (valign == "bottom") { |
| y = Math.round(y - info.height); |
| } else { |
| y = Math.round(y); |
| } |
| |
| // FIXME: LEGACY BROWSER FIX |
| // AFFECTS: Opera < 12.00 |
| |
| // Offset the y coordinate, since Opera is off pretty |
| // consistently compared to the other browsers. |
| |
| if (!!(window.opera && window.opera.version().split(".")[0] < 12)) { |
| y -= 2; |
| } |
| |
| // Determine whether this text already exists at this position. |
| // If so, mark it for inclusion in the next render pass. |
| |
| for (var i = 0, position; position = positions[i]; i++) { |
| if (position.x == x && position.y == y) { |
| position.active = true; |
| return; |
| } |
| } |
| |
| // If the text doesn't exist at this position, create a new entry |
| |
| position = { |
| active: true, |
| lines: [], |
| x: x, |
| y: y |
| }; |
| |
| positions.push(position); |
| |
| // Fill in the x & y positions of each line, adjusting them |
| // individually for horizontal alignment. |
| |
| for (var i = 0, line; line = lines[i]; i++) { |
| if (halign == "center") { |
| position.lines.push([Math.round(x - line.width / 2), y]); |
| } else if (halign == "right") { |
| position.lines.push([Math.round(x - line.width), y]); |
| } else { |
| position.lines.push([Math.round(x), y]); |
| } |
| y += line.height; |
| } |
| }; |
| } |
| |
| $.plot.plugins.push({ |
| init: init, |
| options: options, |
| name: "canvas", |
| version: "1.0" |
| }); |
| |
| })(jQuery); |