aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/graphics/canvaselement.js
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/graphics/canvaselement.js')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/graphics/canvaselement.js785
1 files changed, 0 insertions, 785 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/graphics/canvaselement.js b/contexts/data/lib/closure-library/closure/goog/graphics/canvaselement.js
deleted file mode 100644
index e99fa67..0000000
--- a/contexts/data/lib/closure-library/closure/goog/graphics/canvaselement.js
+++ /dev/null
@@ -1,785 +0,0 @@
-// Copyright 2007 The Closure Library Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS-IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-
-/**
- * @fileoverview Objects representing shapes drawn on a canvas.
- * @author robbyw@google.com (Robby Walker)
- * @author wcrosby@google.com (Wayne Crosby)
- */
-
-goog.provide('goog.graphics.CanvasEllipseElement');
-goog.provide('goog.graphics.CanvasGroupElement');
-goog.provide('goog.graphics.CanvasImageElement');
-goog.provide('goog.graphics.CanvasPathElement');
-goog.provide('goog.graphics.CanvasRectElement');
-goog.provide('goog.graphics.CanvasTextElement');
-
-
-goog.require('goog.array');
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
-goog.require('goog.graphics.EllipseElement');
-goog.require('goog.graphics.GroupElement');
-goog.require('goog.graphics.ImageElement');
-goog.require('goog.graphics.Path');
-goog.require('goog.graphics.PathElement');
-goog.require('goog.graphics.RectElement');
-goog.require('goog.graphics.TextElement');
-
-
-/**
- * Object representing a group of objects in a canvas.
- * This is an implementation of the goog.graphics.GroupElement interface.
- * You should not construct objects from this constructor. The graphics
- * will return the object for you.
- * @param {goog.graphics.CanvasGraphics} graphics The graphics creating
- * this element.
- * @constructor
- * @extends {goog.graphics.GroupElement}
- */
-goog.graphics.CanvasGroupElement = function(graphics) {
- goog.graphics.GroupElement.call(this, null, graphics);
-
-
- /**
- * Children contained by this group.
- * @type {Array.<goog.graphics.Element>}
- * @private
- */
- this.children_ = [];
-};
-goog.inherits(goog.graphics.CanvasGroupElement, goog.graphics.GroupElement);
-
-
-/**
- * Remove all drawing elements from the group.
- * @override
- */
-goog.graphics.CanvasGroupElement.prototype.clear = function() {
- if (this.children_.length) {
- this.children_.length = 0;
- this.getGraphics().redraw();
- }
-};
-
-
-/**
- * Set the size of the group element.
- * @param {number|string} width The width of the group element.
- * @param {number|string} height The height of the group element.
- * @override
- */
-goog.graphics.CanvasGroupElement.prototype.setSize = function(width, height) {
- // Do nothing.
-};
-
-
-/**
- * Append a child to the group. Does not draw it
- * @param {goog.graphics.Element} element The child to append.
- */
-goog.graphics.CanvasGroupElement.prototype.appendChild = function(element) {
- this.children_.push(element);
-};
-
-
-/**
- * Draw the group.
- * @param {CanvasRenderingContext2D} ctx The context to draw the element in.
- */
-goog.graphics.CanvasGroupElement.prototype.draw = function(ctx) {
- for (var i = 0, len = this.children_.length; i < len; i++) {
- this.getGraphics().drawElement(this.children_[i]);
- }
-};
-
-
-
-/**
- * Thin wrapper for canvas ellipse elements.
- * This is an implementation of the goog.graphics.EllipseElement interface.
- * You should not construct objects from this constructor. The graphics
- * will return the object for you.
- * @param {Element} element The DOM element to wrap.
- * @param {goog.graphics.CanvasGraphics} graphics The graphics creating
- * this element.
- * @param {number} cx Center X coordinate.
- * @param {number} cy Center Y coordinate.
- * @param {number} rx Radius length for the x-axis.
- * @param {number} ry Radius length for the y-axis.
- * @param {goog.graphics.Stroke} stroke The stroke to use for this element.
- * @param {goog.graphics.Fill} fill The fill to use for this element.
- * @constructor
- * @extends {goog.graphics.EllipseElement}
- */
-goog.graphics.CanvasEllipseElement = function(element, graphics,
- cx, cy, rx, ry, stroke, fill) {
- goog.graphics.EllipseElement.call(this, element, graphics, stroke, fill);
-
- /**
- * X coordinate of the ellipse center.
- * @type {number}
- * @private
- */
- this.cx_ = cx;
-
-
- /**
- * Y coordinate of the ellipse center.
- * @type {number}
- * @private
- */
- this.cy_ = cy;
-
-
- /**
- * Radius length for the x-axis.
- * @type {number}
- * @private
- */
- this.rx_ = rx;
-
-
- /**
- * Radius length for the y-axis.
- * @type {number}
- * @private
- */
- this.ry_ = ry;
-
-
- /**
- * Internal path approximating an ellipse.
- * @type {goog.graphics.Path}
- * @private
- */
- this.path_ = new goog.graphics.Path();
- this.setUpPath_();
-
- /**
- * Internal path element that actually does the drawing.
- * @type {goog.graphics.CanvasPathElement}
- * @private
- */
- this.pathElement_ = new goog.graphics.CanvasPathElement(null, graphics,
- this.path_, stroke, fill);
-};
-goog.inherits(goog.graphics.CanvasEllipseElement, goog.graphics.EllipseElement);
-
-
-/**
- * Sets up the path.
- * @private
- */
-goog.graphics.CanvasEllipseElement.prototype.setUpPath_ = function() {
- this.path_.clear();
- this.path_.moveTo(this.cx_ + goog.math.angleDx(0, this.rx_),
- this.cy_ + goog.math.angleDy(0, this.ry_));
- this.path_.arcTo(this.rx_, this.ry_, 0, 360);
- this.path_.close();
-};
-
-
-/**
- * Update the center point of the ellipse.
- * @param {number} cx Center X coordinate.
- * @param {number} cy Center Y coordinate.
- * @override
- */
-goog.graphics.CanvasEllipseElement.prototype.setCenter = function(cx, cy) {
- this.cx_ = cx;
- this.cy_ = cy;
- this.setUpPath_();
- this.pathElement_.setPath(/** @type {!goog.graphics.Path} */ (this.path_));
-};
-
-
-/**
- * Update the radius of the ellipse.
- * @param {number} rx Center X coordinate.
- * @param {number} ry Center Y coordinate.
- * @override
- */
-goog.graphics.CanvasEllipseElement.prototype.setRadius = function(rx, ry) {
- this.rx_ = rx;
- this.ry_ = ry;
- this.setUpPath_();
- this.pathElement_.setPath(/** @type {!goog.graphics.Path} */ (this.path_));
-};
-
-
-/**
- * Draw the ellipse. Should be treated as package scope.
- * @param {CanvasRenderingContext2D} ctx The context to draw the element in.
- */
-goog.graphics.CanvasEllipseElement.prototype.draw = function(ctx) {
- this.pathElement_.draw(ctx);
-};
-
-
-
-/**
- * Thin wrapper for canvas rectangle elements.
- * This is an implementation of the goog.graphics.RectElement interface.
- * You should not construct objects from this constructor. The graphics
- * will return the object for you.
- * @param {Element} element The DOM element to wrap.
- * @param {goog.graphics.CanvasGraphics} graphics The graphics creating
- * this element.
- * @param {number} x X coordinate (left).
- * @param {number} y Y coordinate (top).
- * @param {number} w Width of rectangle.
- * @param {number} h Height of rectangle.
- * @param {goog.graphics.Stroke} stroke The stroke to use for this element.
- * @param {goog.graphics.Fill} fill The fill to use for this element.
- * @constructor
- * @extends {goog.graphics.RectElement}
- */
-goog.graphics.CanvasRectElement = function(element, graphics, x, y, w, h,
- stroke, fill) {
- goog.graphics.RectElement.call(this, element, graphics, stroke, fill);
-
- /**
- * X coordinate of the top left corner.
- * @type {number}
- * @private
- */
- this.x_ = x;
-
-
- /**
- * Y coordinate of the top left corner.
- * @type {number}
- * @private
- */
- this.y_ = y;
-
-
- /**
- * Width of the rectangle.
- * @type {number}
- * @private
- */
- this.w_ = w;
-
-
- /**
- * Height of the rectangle.
- * @type {number}
- * @private
- */
- this.h_ = h;
-};
-goog.inherits(goog.graphics.CanvasRectElement, goog.graphics.RectElement);
-
-
-/**
- * Update the position of the rectangle.
- * @param {number} x X coordinate (left).
- * @param {number} y Y coordinate (top).
- * @override
- */
-goog.graphics.CanvasRectElement.prototype.setPosition = function(x, y) {
- this.x_ = x;
- this.y_ = y;
- if (this.drawn_) {
- this.getGraphics().redraw();
- }
-};
-
-
-/**
- * Whether the rectangle has been drawn yet.
- * @type {boolean}
- * @private
- */
-goog.graphics.CanvasRectElement.prototype.drawn_ = false;
-
-
-/**
- * Update the size of the rectangle.
- * @param {number} width Width of rectangle.
- * @param {number} height Height of rectangle.
- * @override
- */
-goog.graphics.CanvasRectElement.prototype.setSize = function(width, height) {
- this.w_ = width;
- this.h_ = height;
- if (this.drawn_) {
- this.getGraphics().redraw();
- }
-};
-
-
-/**
- * Draw the rectangle. Should be treated as package scope.
- * @param {CanvasRenderingContext2D} ctx The context to draw the element in.
- */
-goog.graphics.CanvasRectElement.prototype.draw = function(ctx) {
- this.drawn_ = true;
- ctx.beginPath();
- ctx.moveTo(this.x_, this.y_);
- ctx.lineTo(this.x_, this.y_ + this.h_);
- ctx.lineTo(this.x_ + this.w_, this.y_ + this.h_);
- ctx.lineTo(this.x_ + this.w_, this.y_);
- ctx.closePath();
-};
-
-
-
-/**
- * Thin wrapper for canvas path elements.
- * This is an implementation of the goog.graphics.PathElement interface.
- * You should not construct objects from this constructor. The graphics
- * will return the object for you.
- * @param {Element} element The DOM element to wrap.
- * @param {goog.graphics.CanvasGraphics} graphics The graphics creating
- * this element.
- * @param {!goog.graphics.Path} path The path object to draw.
- * @param {goog.graphics.Stroke} stroke The stroke to use for this element.
- * @param {goog.graphics.Fill} fill The fill to use for this element.
- * @constructor
- * @extends {goog.graphics.PathElement}
- */
-goog.graphics.CanvasPathElement = function(element, graphics, path, stroke,
- fill) {
- goog.graphics.PathElement.call(this, element, graphics, stroke, fill);
-
- this.setPath(path);
-};
-goog.inherits(goog.graphics.CanvasPathElement, goog.graphics.PathElement);
-
-
-/**
- * Whether the shape has been drawn yet.
- * @type {boolean}
- * @private
- */
-goog.graphics.CanvasPathElement.prototype.drawn_ = false;
-
-
-/**
- * The path to draw.
- * @type {goog.graphics.Path}
- * @private
- */
-goog.graphics.CanvasPathElement.prototype.path_;
-
-
-/**
- * Update the underlying path.
- * @param {!goog.graphics.Path} path The path object to draw.
- * @override
- */
-goog.graphics.CanvasPathElement.prototype.setPath = function(path) {
- this.path_ = path.isSimple() ? path :
- goog.graphics.Path.createSimplifiedPath(path);
- if (this.drawn_) {
- this.getGraphics().redraw();
- }
-};
-
-
-/**
- * Draw the path. Should be treated as package scope.
- * @param {CanvasRenderingContext2D} ctx The context to draw the element in.
- */
-goog.graphics.CanvasPathElement.prototype.draw = function(ctx) {
- this.drawn_ = true;
-
- ctx.beginPath();
- this.path_.forEachSegment(function(segment, args) {
- switch (segment) {
- case goog.graphics.Path.Segment.MOVETO:
- ctx.moveTo(args[0], args[1]);
- break;
- case goog.graphics.Path.Segment.LINETO:
- for (var i = 0; i < args.length; i += 2) {
- ctx.lineTo(args[i], args[i + 1]);
- }
- break;
- case goog.graphics.Path.Segment.CURVETO:
- for (var i = 0; i < args.length; i += 6) {
- ctx.bezierCurveTo(args[i], args[i + 1], args[i + 2],
- args[i + 3], args[i + 4], args[i + 5]);
- }
- break;
- case goog.graphics.Path.Segment.ARCTO:
- throw Error('Canvas paths cannot contain arcs');
- case goog.graphics.Path.Segment.CLOSE:
- ctx.closePath();
- break;
- }
- });
-};
-
-
-
-/**
- * Thin wrapper for canvas text elements.
- * This is an implementation of the goog.graphics.TextElement interface.
- * You should not construct objects from this constructor. The graphics
- * will return the object for you.
- * @param {!goog.graphics.CanvasGraphics} graphics The graphics creating
- * this element.
- * @param {string} text The text to draw.
- * @param {number} x1 X coordinate of start of line.
- * @param {number} y1 Y coordinate of start of line.
- * @param {number} x2 X coordinate of end of line.
- * @param {number} y2 Y coordinate of end of line.
- * @param {?string} align Horizontal alignment: left (default), center, right.
- * @param {!goog.graphics.Font} font Font describing the font properties.
- * @param {goog.graphics.Stroke} stroke The stroke to use for this element.
- * @param {goog.graphics.Fill} fill The fill to use for this element.
- * @constructor
- * @extends {goog.graphics.TextElement}
- */
-goog.graphics.CanvasTextElement = function(graphics, text, x1, y1, x2, y2,
- align, font, stroke, fill) {
- var element = goog.dom.createDom(goog.dom.TagName.DIV, {
- 'style': 'display:table;position:absolute;padding:0;margin:0;border:0'
- });
- goog.graphics.TextElement.call(this, element, graphics, stroke, fill);
-
- /**
- * The text to draw.
- * @type {string}
- * @private
- */
- this.text_ = text;
-
- /**
- * X coordinate of the start of the line the text is drawn on.
- * @type {number}
- * @private
- */
- this.x1_ = x1;
-
- /**
- * Y coordinate of the start of the line the text is drawn on.
- * @type {number}
- * @private
- */
- this.y1_ = y1;
-
- /**
- * X coordinate of the end of the line the text is drawn on.
- * @type {number}
- * @private
- */
- this.x2_ = x2;
-
- /**
- * Y coordinate of the end of the line the text is drawn on.
- * @type {number}
- * @private
- */
- this.y2_ = y2;
-
- /**
- * Horizontal alignment: left (default), center, right.
- * @type {string}
- * @private
- */
- this.align_ = align || 'left';
-
- /**
- * Font object describing the font properties.
- * @type {goog.graphics.Font}
- * @private
- */
- this.font_ = font;
-
- /**
- * The inner element that contains the text.
- * @type {Element}
- * @private
- */
- this.innerElement_ = goog.dom.createDom('DIV', {
- 'style': 'display:table-cell;padding: 0;margin: 0;border: 0'
- });
-
- this.updateStyle_();
- this.updateText_();
-
- // Append to the DOM.
- graphics.getElement().appendChild(element);
- element.appendChild(this.innerElement_);
-};
-goog.inherits(goog.graphics.CanvasTextElement, goog.graphics.TextElement);
-
-
-/**
- * Update the displayed text of the element.
- * @param {string} text The text to draw.
- * @override
- */
-goog.graphics.CanvasTextElement.prototype.setText = function(text) {
- this.text_ = text;
- this.updateText_();
-};
-
-
-/**
- * Sets the fill for this element.
- * @param {goog.graphics.Fill} fill The fill object.
- * @override
- */
-goog.graphics.CanvasTextElement.prototype.setFill = function(fill) {
- this.fill = fill;
- var element = this.getElement();
- if (element) {
- element.style.color = fill.getColor() || fill.getColor1();
- }
-};
-
-
-/**
- * Sets the stroke for this element.
- * @param {goog.graphics.Stroke} stroke The stroke object.
- * @override
- */
-goog.graphics.CanvasTextElement.prototype.setStroke = function(stroke) {
- // Ignore stroke
-};
-
-
-/**
- * Draw the text. Should be treated as package scope.
- * @param {CanvasRenderingContext2D} ctx The context to draw the element in.
- */
-goog.graphics.CanvasTextElement.prototype.draw = function(ctx) {
- // Do nothing - the text is already drawn.
-};
-
-
-/**
- * Update the styles of the DIVs.
- * @private
- */
-goog.graphics.CanvasTextElement.prototype.updateStyle_ = function() {
- var x1 = this.x1_;
- var x2 = this.x2_;
- var y1 = this.y1_;
- var y2 = this.y2_;
- var align = this.align_;
- var font = this.font_;
- var style = this.getElement().style;
- var scaleX = this.getGraphics().getPixelScaleX();
- var scaleY = this.getGraphics().getPixelScaleY();
-
- if (x1 == x2) {
- // Special case vertical text
- style.lineHeight = '90%';
-
- this.innerElement_.style.verticalAlign = align == 'center' ? 'middle' :
- align == 'left' ? (y1 < y2 ? 'top' : 'bottom') :
- y1 < y2 ? 'bottom' : 'top';
- style.textAlign = 'center';
-
- var w = font.size * scaleX;
- style.top = Math.round(Math.min(y1, y2) * scaleY) + 'px';
- style.left = Math.round((x1 - w / 2) * scaleX) + 'px';
- style.width = Math.round(w) + 'px';
- style.height = Math.abs(y1 - y2) * scaleY + 'px';
-
- style.fontSize = font.size * 0.6 * scaleY + 'pt';
- } else {
- style.lineHeight = '100%';
- this.innerElement_.style.verticalAlign = 'top';
- style.textAlign = align;
-
- style.top = Math.round(((y1 + y2) / 2 - font.size * 2 / 3) * scaleY) + 'px';
- style.left = Math.round(x1 * scaleX) + 'px';
- style.width = Math.round(Math.abs(x2 - x1) * scaleX) + 'px';
- style.height = 'auto';
-
- style.fontSize = font.size * scaleY + 'pt';
- }
-
- style.fontWeight = font.bold ? 'bold' : 'normal';
- style.fontStyle = font.italic ? 'italic' : 'normal';
- style.fontFamily = font.family;
-
- var fill = this.getFill();
- style.color = fill.getColor() || fill.getColor1();
-};
-
-
-/**
- * Update the text content.
- * @private
- */
-goog.graphics.CanvasTextElement.prototype.updateText_ = function() {
- if (this.x1_ == this.x2_) {
- // Special case vertical text
- this.innerElement_.innerHTML =
- goog.array.map(this.text_.split(''),
- function(entry) { return goog.string.htmlEscape(entry); }).
- join('<br>');
- } else {
- this.innerElement_.innerHTML = goog.string.htmlEscape(this.text_);
- }
-};
-
-
-
-/**
- * Thin wrapper for canvas image elements.
- * This is an implementation of the goog.graphics.ImageElement interface.
- * You should not construct objects from this constructor. The graphics
- * will return the object for you.
- * @param {Element} element The DOM element to wrap.
- * @param {goog.graphics.CanvasGraphics} graphics The graphics creating
- * this element.
- * @param {number} x X coordinate (left).
- * @param {number} y Y coordinate (top).
- * @param {number} w Width of rectangle.
- * @param {number} h Height of rectangle.
- * @param {string} src Source of the image.
- * @constructor
- * @extends {goog.graphics.ImageElement}
- */
-goog.graphics.CanvasImageElement = function(element, graphics, x, y, w, h,
- src) {
- goog.graphics.ImageElement.call(this, element, graphics);
-
- /**
- * X coordinate of the top left corner.
- * @type {number}
- * @private
- */
- this.x_ = x;
-
-
- /**
- * Y coordinate of the top left corner.
- * @type {number}
- * @private
- */
- this.y_ = y;
-
-
- /**
- * Width of the rectangle.
- * @type {number}
- * @private
- */
- this.w_ = w;
-
-
- /**
- * Height of the rectangle.
- * @type {number}
- * @private
- */
- this.h_ = h;
-
-
- /**
- * URL of the image source.
- * @type {string}
- * @private
- */
- this.src_ = src;
-};
-goog.inherits(goog.graphics.CanvasImageElement, goog.graphics.ImageElement);
-
-
-/**
- * Whether the image has been drawn yet.
- * @type {boolean}
- * @private
- */
-goog.graphics.CanvasImageElement.prototype.drawn_ = false;
-
-
-/**
- * Update the position of the image.
- * @param {number} x X coordinate (left).
- * @param {number} y Y coordinate (top).
- * @override
- */
-goog.graphics.CanvasImageElement.prototype.setPosition = function(x, y) {
- this.x_ = x;
- this.y_ = y;
- if (this.drawn_) {
- this.getGraphics().redraw();
- }
-};
-
-
-/**
- * Update the size of the image.
- * @param {number} width Width of rectangle.
- * @param {number} height Height of rectangle.
- * @override
- */
-goog.graphics.CanvasImageElement.prototype.setSize = function(width, height) {
- this.w_ = width;
- this.h_ = height;
- if (this.drawn_) {
- this.getGraphics().redraw();
- }
-};
-
-
-/**
- * Update the source of the image.
- * @param {string} src Source of the image.
- * @override
- */
-goog.graphics.CanvasImageElement.prototype.setSource = function(src) {
- this.src_ = src;
- if (this.drawn_) {
- // TODO(robbyw): Probably need to reload the image here.
- this.getGraphics().redraw();
- }
-};
-
-
-/**
- * Draw the image. Should be treated as package scope.
- * @param {CanvasRenderingContext2D} ctx The context to draw the element in.
- */
-goog.graphics.CanvasImageElement.prototype.draw = function(ctx) {
- if (this.img_) {
- if (this.w_ && this.h_) {
- // If the image is already loaded, draw it.
- ctx.drawImage(this.img_, this.x_, this.y_, this.w_, this.h_);
- }
- this.drawn_ = true;
-
- } else {
- // Otherwise, load it.
- var img = new Image();
- img.onload = goog.bind(this.handleImageLoad_, this, img);
- // TODO(robbyw): Handle image load errors.
- img.src = this.src_;
- }
-};
-
-
-/**
- * Handle an image load.
- * @param {Element} img The image element that finished loading.
- * @private
- */
-goog.graphics.CanvasImageElement.prototype.handleImageLoad_ = function(img) {
- this.img_ = img;
-
- // TODO(robbyw): Add a small delay to catch batched images
- this.getGraphics().redraw();
-};