+++ /dev/null
-/* Flot plugin for drawing all elements of a plot on the canvas.
-
-Copyright (c) 2007-2013 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);
Code Review / stor4nfv.git / blobdiff