626 lines
21 KiB
JavaScript
626 lines
21 KiB
JavaScript
// Copyright 2008 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 Class definition for a rounded corner panel.
|
|
* @supported IE 6.0+, Safari 2.0+, Firefox 1.5+, Opera 9.2+.
|
|
* @see ../demos/roundedpanel.html
|
|
*/
|
|
|
|
goog.provide('goog.ui.BaseRoundedPanel');
|
|
goog.provide('goog.ui.CssRoundedPanel');
|
|
goog.provide('goog.ui.GraphicsRoundedPanel');
|
|
goog.provide('goog.ui.RoundedPanel');
|
|
goog.provide('goog.ui.RoundedPanel.Corner');
|
|
|
|
goog.require('goog.dom');
|
|
goog.require('goog.dom.classes');
|
|
goog.require('goog.graphics');
|
|
goog.require('goog.graphics.Path');
|
|
goog.require('goog.graphics.SolidFill');
|
|
goog.require('goog.graphics.Stroke');
|
|
goog.require('goog.math');
|
|
goog.require('goog.math.Coordinate');
|
|
goog.require('goog.style');
|
|
goog.require('goog.ui.Component');
|
|
goog.require('goog.userAgent');
|
|
|
|
|
|
/**
|
|
* Factory method that returns an instance of a BaseRoundedPanel.
|
|
* @param {number} radius The radius of the rounded corner(s), in pixels.
|
|
* @param {number} borderWidth The thickness of the border, in pixels.
|
|
* @param {string} borderColor The border color of the panel.
|
|
* @param {string=} opt_backgroundColor The background color of the panel.
|
|
* @param {number=} opt_corners The corners of the panel to be rounded. Any
|
|
* corners not specified will be rendered as square corners. Will default
|
|
* to all square corners if not specified.
|
|
* @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the
|
|
* document we want to render in.
|
|
* @return {goog.ui.BaseRoundedPanel} An instance of a
|
|
* goog.ui.BaseRoundedPanel subclass.
|
|
*/
|
|
goog.ui.RoundedPanel.create = function(radius,
|
|
borderWidth,
|
|
borderColor,
|
|
opt_backgroundColor,
|
|
opt_corners,
|
|
opt_domHelper) {
|
|
// This variable checks for the presence of Safari 3.0+ or Gecko 1.9+,
|
|
// which can leverage special CSS styles to create rounded corners.
|
|
var isCssReady = goog.userAgent.WEBKIT &&
|
|
goog.userAgent.isVersionOrHigher('500') ||
|
|
goog.userAgent.GECKO && goog.userAgent.isVersionOrHigher('1.9a');
|
|
|
|
if (isCssReady) {
|
|
// Safari 3.0+ and Firefox 3.0+ support this instance.
|
|
return new goog.ui.CssRoundedPanel(
|
|
radius,
|
|
borderWidth,
|
|
borderColor,
|
|
opt_backgroundColor,
|
|
opt_corners,
|
|
opt_domHelper);
|
|
} else {
|
|
return new goog.ui.GraphicsRoundedPanel(
|
|
radius,
|
|
borderWidth,
|
|
borderColor,
|
|
opt_backgroundColor,
|
|
opt_corners,
|
|
opt_domHelper);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Enum for specifying which corners to render.
|
|
* @enum {number}
|
|
*/
|
|
goog.ui.RoundedPanel.Corner = {
|
|
NONE: 0,
|
|
BOTTOM_LEFT: 2,
|
|
TOP_LEFT: 4,
|
|
LEFT: 6, // BOTTOM_LEFT | TOP_LEFT
|
|
TOP_RIGHT: 8,
|
|
TOP: 12, // TOP_LEFT | TOP_RIGHT
|
|
BOTTOM_RIGHT: 1,
|
|
BOTTOM: 3, // BOTTOM_LEFT | BOTTOM_RIGHT
|
|
RIGHT: 9, // TOP_RIGHT | BOTTOM_RIGHT
|
|
ALL: 15 // TOP | BOTTOM
|
|
};
|
|
|
|
|
|
/**
|
|
* CSS class name suffixes for the elements comprising the RoundedPanel.
|
|
* @enum {string}
|
|
* @private
|
|
*/
|
|
goog.ui.RoundedPanel.Classes_ = {
|
|
BACKGROUND: goog.getCssName('goog-roundedpanel-background'),
|
|
PANEL: goog.getCssName('goog-roundedpanel'),
|
|
CONTENT: goog.getCssName('goog-roundedpanel-content')
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
* Base class for the hierarchy of RoundedPanel classes. Do not
|
|
* instantiate directly. Instead, call goog.ui.RoundedPanel.create().
|
|
* The HTML structure for the RoundedPanel is:
|
|
* <pre>
|
|
* - div (Contains the background and content. Class name: goog-roundedpanel)
|
|
* - div (Contains the background/rounded corners. Class name:
|
|
* goog-roundedpanel-bg)
|
|
* - div (Contains the content. Class name: goog-roundedpanel-content)
|
|
* </pre>
|
|
* @param {number} radius The radius of the rounded corner(s), in pixels.
|
|
* @param {number} borderWidth The thickness of the border, in pixels.
|
|
* @param {string} borderColor The border color of the panel.
|
|
* @param {string=} opt_backgroundColor The background color of the panel.
|
|
* @param {number=} opt_corners The corners of the panel to be rounded. Any
|
|
* corners not specified will be rendered as square corners. Will default
|
|
* to all square corners if not specified.
|
|
* @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the
|
|
* document we want to render in.
|
|
* @extends {goog.ui.Component}
|
|
* @constructor
|
|
*/
|
|
goog.ui.BaseRoundedPanel = function(radius,
|
|
borderWidth,
|
|
borderColor,
|
|
opt_backgroundColor,
|
|
opt_corners,
|
|
opt_domHelper) {
|
|
goog.ui.Component.call(this, opt_domHelper);
|
|
|
|
/**
|
|
* The radius of the rounded corner(s), in pixels.
|
|
* @type {number}
|
|
* @private
|
|
*/
|
|
this.radius_ = radius;
|
|
|
|
/**
|
|
* The thickness of the border, in pixels.
|
|
* @type {number}
|
|
* @private
|
|
*/
|
|
this.borderWidth_ = borderWidth;
|
|
|
|
/**
|
|
* The border color of the panel.
|
|
* @type {string}
|
|
* @private
|
|
*/
|
|
this.borderColor_ = borderColor;
|
|
|
|
/**
|
|
* The background color of the panel.
|
|
* @type {?string}
|
|
* @private
|
|
*/
|
|
this.backgroundColor_ = opt_backgroundColor || null;
|
|
|
|
/**
|
|
* The corners of the panel to be rounded; defaults to
|
|
* goog.ui.RoundedPanel.Corner.NONE
|
|
* @type {number}
|
|
* @private
|
|
*/
|
|
this.corners_ = opt_corners || goog.ui.RoundedPanel.Corner.NONE;
|
|
};
|
|
goog.inherits(goog.ui.BaseRoundedPanel, goog.ui.Component);
|
|
|
|
|
|
/**
|
|
* The element containing the rounded corners and background.
|
|
* @type {Element}
|
|
* @private
|
|
*/
|
|
goog.ui.BaseRoundedPanel.prototype.backgroundElement_;
|
|
|
|
|
|
/**
|
|
* The element containing the actual content.
|
|
* @type {Element}
|
|
* @private
|
|
*/
|
|
goog.ui.BaseRoundedPanel.prototype.contentElement_;
|
|
|
|
|
|
/**
|
|
* This method performs all the necessary DOM manipulation to create the panel.
|
|
* Overrides {@link goog.ui.Component#decorateInternal}.
|
|
* @param {Element} element The element to decorate.
|
|
* @protected
|
|
* @override
|
|
*/
|
|
goog.ui.BaseRoundedPanel.prototype.decorateInternal = function(element) {
|
|
goog.ui.BaseRoundedPanel.superClass_.decorateInternal.call(this, element);
|
|
goog.dom.classes.add(this.getElement(), goog.ui.RoundedPanel.Classes_.PANEL);
|
|
|
|
// Create backgroundElement_, and add it to the DOM.
|
|
this.backgroundElement_ = this.getDomHelper().createElement('div');
|
|
this.backgroundElement_.className = goog.ui.RoundedPanel.Classes_.BACKGROUND;
|
|
this.getElement().appendChild(this.backgroundElement_);
|
|
|
|
// Set contentElement_ by finding a child node within element_ with the
|
|
// proper class name. If none exists, create it and add it to the DOM.
|
|
this.contentElement_ = goog.dom.getElementsByTagNameAndClass(
|
|
null, goog.ui.RoundedPanel.Classes_.CONTENT, this.getElement())[0];
|
|
if (!this.contentElement_) {
|
|
this.contentElement_ = this.getDomHelper().createDom('div');
|
|
this.contentElement_.className = goog.ui.RoundedPanel.Classes_.CONTENT;
|
|
this.getElement().appendChild(this.contentElement_);
|
|
}
|
|
};
|
|
|
|
|
|
/** @override */
|
|
goog.ui.BaseRoundedPanel.prototype.disposeInternal = function() {
|
|
if (this.backgroundElement_) {
|
|
this.getDomHelper().removeNode(this.backgroundElement_);
|
|
this.backgroundElement_ = null;
|
|
}
|
|
this.contentElement_ = null;
|
|
goog.ui.BaseRoundedPanel.superClass_.disposeInternal.call(this);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the DOM element containing the actual content.
|
|
* @return {Element} The element containing the actual content (null if none).
|
|
* @override
|
|
*/
|
|
goog.ui.BaseRoundedPanel.prototype.getContentElement = function() {
|
|
return this.contentElement_;
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
* RoundedPanel class specifically for browsers that support CSS attributes
|
|
* for elements with rounded borders (ex. Safari 3.0+, Firefox 3.0+). Do not
|
|
* instantiate directly. Instead, call goog.ui.RoundedPanel.create().
|
|
* @param {number} radius The radius of the rounded corner(s), in pixels.
|
|
* @param {number} borderWidth The thickness of the border, in pixels.
|
|
* @param {string} borderColor The border color of the panel.
|
|
* @param {string=} opt_backgroundColor The background color of the panel.
|
|
* @param {number=} opt_corners The corners of the panel to be rounded. Any
|
|
* corners not specified will be rendered as square corners. Will
|
|
* default to all square corners if not specified.
|
|
* @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the
|
|
* document we want to render in.
|
|
* @extends {goog.ui.BaseRoundedPanel}
|
|
* @constructor
|
|
*/
|
|
goog.ui.CssRoundedPanel = function(radius,
|
|
borderWidth,
|
|
borderColor,
|
|
opt_backgroundColor,
|
|
opt_corners,
|
|
opt_domHelper) {
|
|
goog.ui.BaseRoundedPanel.call(this,
|
|
radius,
|
|
borderWidth,
|
|
borderColor,
|
|
opt_backgroundColor,
|
|
opt_corners,
|
|
opt_domHelper);
|
|
};
|
|
goog.inherits(goog.ui.CssRoundedPanel, goog.ui.BaseRoundedPanel);
|
|
|
|
|
|
/**
|
|
* This method performs all the necessary DOM manipulation to create the panel.
|
|
* Overrides {@link goog.ui.Component#decorateInternal}.
|
|
* @param {Element} element The element to decorate.
|
|
* @protected
|
|
* @override
|
|
*/
|
|
goog.ui.CssRoundedPanel.prototype.decorateInternal = function(element) {
|
|
goog.ui.CssRoundedPanel.superClass_.decorateInternal.call(this, element);
|
|
|
|
// Set the border width and background color, if needed.
|
|
this.backgroundElement_.style.border = this.borderWidth_ +
|
|
'px solid ' +
|
|
this.borderColor_;
|
|
if (this.backgroundColor_) {
|
|
this.backgroundElement_.style.backgroundColor = this.backgroundColor_;
|
|
}
|
|
|
|
// Set radii of the appropriate rounded corners.
|
|
if (this.corners_ == goog.ui.RoundedPanel.Corner.ALL) {
|
|
var styleName = this.getStyle_(goog.ui.RoundedPanel.Corner.ALL);
|
|
this.backgroundElement_.style[styleName] = this.radius_ + 'px';
|
|
} else {
|
|
var topLeftRadius =
|
|
this.corners_ & goog.ui.RoundedPanel.Corner.TOP_LEFT ?
|
|
this.radius_ :
|
|
0;
|
|
var cornerStyle = this.getStyle_(goog.ui.RoundedPanel.Corner.TOP_LEFT);
|
|
this.backgroundElement_.style[cornerStyle] = topLeftRadius + 'px';
|
|
var topRightRadius =
|
|
this.corners_ & goog.ui.RoundedPanel.Corner.TOP_RIGHT ?
|
|
this.radius_ :
|
|
0;
|
|
cornerStyle = this.getStyle_(goog.ui.RoundedPanel.Corner.TOP_RIGHT);
|
|
this.backgroundElement_.style[cornerStyle] = topRightRadius + 'px';
|
|
var bottomRightRadius =
|
|
this.corners_ & goog.ui.RoundedPanel.Corner.BOTTOM_RIGHT ?
|
|
this.radius_ :
|
|
0;
|
|
cornerStyle = this.getStyle_(goog.ui.RoundedPanel.Corner.BOTTOM_RIGHT);
|
|
this.backgroundElement_.style[cornerStyle] = bottomRightRadius + 'px';
|
|
var bottomLeftRadius =
|
|
this.corners_ & goog.ui.RoundedPanel.Corner.BOTTOM_LEFT ?
|
|
this.radius_ :
|
|
0;
|
|
cornerStyle = this.getStyle_(goog.ui.RoundedPanel.Corner.BOTTOM_LEFT);
|
|
this.backgroundElement_.style[cornerStyle] = bottomLeftRadius + 'px';
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* This method returns the CSS style based on the corner of the panel, and the
|
|
* user-agent.
|
|
* @param {number} corner The corner whose style name to retrieve.
|
|
* @private
|
|
* @return {string} The CSS style based on the specified corner.
|
|
*/
|
|
goog.ui.CssRoundedPanel.prototype.getStyle_ = function(corner) {
|
|
// Determine the proper corner to work with.
|
|
var cssCorner, suffixLeft, suffixRight;
|
|
if (goog.userAgent.WEBKIT) {
|
|
suffixLeft = 'Left';
|
|
suffixRight = 'Right';
|
|
} else {
|
|
suffixLeft = 'left';
|
|
suffixRight = 'right';
|
|
}
|
|
switch (corner) {
|
|
case goog.ui.RoundedPanel.Corner.ALL:
|
|
cssCorner = '';
|
|
break;
|
|
case goog.ui.RoundedPanel.Corner.TOP_LEFT:
|
|
cssCorner = 'Top' + suffixLeft;
|
|
break;
|
|
case goog.ui.RoundedPanel.Corner.TOP_RIGHT:
|
|
cssCorner = 'Top' + suffixRight;
|
|
break;
|
|
case goog.ui.RoundedPanel.Corner.BOTTOM_LEFT:
|
|
cssCorner = 'Bottom' + suffixLeft;
|
|
break;
|
|
case goog.ui.RoundedPanel.Corner.BOTTOM_RIGHT:
|
|
cssCorner = 'Bottom' + suffixRight;
|
|
break;
|
|
}
|
|
|
|
return goog.userAgent.WEBKIT ?
|
|
'WebkitBorder' + cssCorner + 'Radius' :
|
|
'MozBorderRadius' + cssCorner;
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
* RoundedPanel class that uses goog.graphics to create the rounded corners.
|
|
* Do not instantiate directly. Instead, call goog.ui.RoundedPanel.create().
|
|
* @param {number} radius The radius of the rounded corner(s), in pixels.
|
|
* @param {number} borderWidth The thickness of the border, in pixels.
|
|
* @param {string} borderColor The border color of the panel.
|
|
* @param {string=} opt_backgroundColor The background color of the panel.
|
|
* @param {number=} opt_corners The corners of the panel to be rounded. Any
|
|
* corners not specified will be rendered as square corners. Will
|
|
* default to all square corners if not specified.
|
|
* @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the
|
|
* document we want to render in.
|
|
* @extends {goog.ui.BaseRoundedPanel}
|
|
* @constructor
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel = function(radius,
|
|
borderWidth,
|
|
borderColor,
|
|
opt_backgroundColor,
|
|
opt_corners,
|
|
opt_domHelper) {
|
|
goog.ui.BaseRoundedPanel.call(this,
|
|
radius,
|
|
borderWidth,
|
|
borderColor,
|
|
opt_backgroundColor,
|
|
opt_corners,
|
|
opt_domHelper);
|
|
};
|
|
goog.inherits(goog.ui.GraphicsRoundedPanel, goog.ui.BaseRoundedPanel);
|
|
|
|
|
|
/**
|
|
* A 4-element array containing the circle centers for the arcs in the
|
|
* bottom-left, top-left, top-right, and bottom-right corners, respectively.
|
|
* @type {Array.<goog.math.Coordinate>}
|
|
* @private
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.prototype.arcCenters_;
|
|
|
|
|
|
/**
|
|
* A 4-element array containing the start coordinates for rendering the arcs
|
|
* in the bottom-left, top-left, top-right, and bottom-right corners,
|
|
* respectively.
|
|
* @type {Array.<goog.math.Coordinate>}
|
|
* @private
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.prototype.cornerStarts_;
|
|
|
|
|
|
/**
|
|
* A 4-element array containing the arc end angles for the bottom-left,
|
|
* top-left, top-right, and bottom-right corners, respectively.
|
|
* @type {Array.<number>}
|
|
* @private
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.prototype.endAngles_;
|
|
|
|
|
|
/**
|
|
* Graphics object for rendering the background.
|
|
* @type {goog.graphics.AbstractGraphics}
|
|
* @private
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.prototype.graphics_;
|
|
|
|
|
|
/**
|
|
* A 4-element array containing the rounded corner radii for the bottom-left,
|
|
* top-left, top-right, and bottom-right corners, respectively.
|
|
* @type {Array.<number>}
|
|
* @private
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.prototype.radii_;
|
|
|
|
|
|
/**
|
|
* A 4-element array containing the arc start angles for the bottom-left,
|
|
* top-left, top-right, and bottom-right corners, respectively.
|
|
* @type {Array.<number>}
|
|
* @private
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.prototype.startAngles_;
|
|
|
|
|
|
/**
|
|
* Thickness constant used as an offset to help determine where to start
|
|
* rendering.
|
|
* @type {number}
|
|
* @private
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.BORDER_WIDTH_FACTOR_ = 1 / 2;
|
|
|
|
|
|
/**
|
|
* This method performs all the necessary DOM manipulation to create the panel.
|
|
* Overrides {@link goog.ui.Component#decorateInternal}.
|
|
* @param {Element} element The element to decorate.
|
|
* @protected
|
|
* @override
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.prototype.decorateInternal =
|
|
function(element) {
|
|
goog.ui.GraphicsRoundedPanel.superClass_.decorateInternal.call(this,
|
|
element);
|
|
|
|
// Calculate the points and angles for creating the rounded corners. Then
|
|
// instantiate a Graphics object for drawing purposes.
|
|
var elementSize = goog.style.getSize(this.getElement());
|
|
this.calculateArcParameters_(elementSize);
|
|
this.graphics_ = goog.graphics.createGraphics(
|
|
/** @type {number} */ (elementSize.width),
|
|
/** @type {number} */ (elementSize.height),
|
|
/** @type {number} */ (elementSize.width),
|
|
/** @type {number} */ (elementSize.height),
|
|
this.getDomHelper());
|
|
this.graphics_.createDom();
|
|
|
|
// Create the path, starting from the bottom-right corner, moving clockwise.
|
|
// End with the top-right corner.
|
|
var path = new goog.graphics.Path();
|
|
for (var i = 0; i < 4; i++) {
|
|
if (this.radii_[i]) {
|
|
// If radius > 0, draw an arc, moving to the first point and drawing
|
|
// a line to the others.
|
|
var cx = this.arcCenters_[i].x;
|
|
var cy = this.arcCenters_[i].y;
|
|
var rx = this.radii_[i];
|
|
var ry = rx;
|
|
var fromAngle = this.startAngles_[i];
|
|
var extent = this.endAngles_[i] - fromAngle;
|
|
var startX = cx + goog.math.angleDx(fromAngle, rx);
|
|
var startY = cy + goog.math.angleDy(fromAngle, ry);
|
|
if (i > 0) {
|
|
var currentPoint = path.getCurrentPoint();
|
|
if (!currentPoint || startX != currentPoint[0] ||
|
|
startY != currentPoint[1]) {
|
|
path.lineTo(startX, startY);
|
|
}
|
|
} else {
|
|
path.moveTo(startX, startY);
|
|
}
|
|
path.arcTo(rx, ry, fromAngle, extent);
|
|
} else if (i == 0) {
|
|
// If we're just starting out (ie. i == 0), move to the starting point.
|
|
path.moveTo(this.cornerStarts_[i].x,
|
|
this.cornerStarts_[i].y);
|
|
} else {
|
|
// Otherwise, draw a line to the starting point.
|
|
path.lineTo(this.cornerStarts_[i].x,
|
|
this.cornerStarts_[i].y);
|
|
}
|
|
}
|
|
|
|
// Close the path, create a stroke object, and fill the enclosed area, if
|
|
// needed. Then render the path.
|
|
path.close();
|
|
var stroke = this.borderWidth_ ?
|
|
new goog.graphics.Stroke(this.borderWidth_, this.borderColor_) :
|
|
null;
|
|
var fill = this.backgroundColor_ ?
|
|
new goog.graphics.SolidFill(this.backgroundColor_, 1) :
|
|
null;
|
|
this.graphics_.drawPath(path, stroke, fill);
|
|
this.graphics_.render(this.backgroundElement_);
|
|
};
|
|
|
|
|
|
/** @override */
|
|
goog.ui.GraphicsRoundedPanel.prototype.disposeInternal = function() {
|
|
goog.ui.GraphicsRoundedPanel.superClass_.disposeInternal.call(this);
|
|
this.graphics_.dispose();
|
|
delete this.graphics_;
|
|
delete this.radii_;
|
|
delete this.cornerStarts_;
|
|
delete this.arcCenters_;
|
|
delete this.startAngles_;
|
|
delete this.endAngles_;
|
|
};
|
|
|
|
|
|
/**
|
|
* Calculates the start coordinates, circle centers, and angles, for the rounded
|
|
* corners at each corner of the panel.
|
|
* @param {goog.math.Size} elementSize The size of element_.
|
|
* @private
|
|
*/
|
|
goog.ui.GraphicsRoundedPanel.prototype.calculateArcParameters_ =
|
|
function(elementSize) {
|
|
// Initialize the arrays containing the key points and angles.
|
|
this.radii_ = [];
|
|
this.cornerStarts_ = [];
|
|
this.arcCenters_ = [];
|
|
this.startAngles_ = [];
|
|
this.endAngles_ = [];
|
|
|
|
// Set the start points, circle centers, and angles for the bottom-right,
|
|
// bottom-left, top-left and top-right corners, in that order.
|
|
var angleInterval = 90;
|
|
var borderWidthOffset = this.borderWidth_ *
|
|
goog.ui.GraphicsRoundedPanel.BORDER_WIDTH_FACTOR_;
|
|
var radius, xStart, yStart, xCenter, yCenter, startAngle, endAngle;
|
|
for (var i = 0; i < 4; i++) {
|
|
var corner = Math.pow(2, i); // Determines which corner we're dealing with.
|
|
var isLeft = corner & goog.ui.RoundedPanel.Corner.LEFT;
|
|
var isTop = corner & goog.ui.RoundedPanel.Corner.TOP;
|
|
|
|
// Calculate the radius and the start coordinates.
|
|
radius = corner & this.corners_ ? this.radius_ : 0;
|
|
switch (corner) {
|
|
case goog.ui.RoundedPanel.Corner.BOTTOM_LEFT:
|
|
xStart = borderWidthOffset + radius;
|
|
yStart = elementSize.height - borderWidthOffset;
|
|
break;
|
|
case goog.ui.RoundedPanel.Corner.TOP_LEFT:
|
|
xStart = borderWidthOffset;
|
|
yStart = radius + borderWidthOffset;
|
|
break;
|
|
case goog.ui.RoundedPanel.Corner.TOP_RIGHT:
|
|
xStart = elementSize.width - radius - borderWidthOffset;
|
|
yStart = borderWidthOffset;
|
|
break;
|
|
case goog.ui.RoundedPanel.Corner.BOTTOM_RIGHT:
|
|
xStart = elementSize.width - borderWidthOffset;
|
|
yStart = elementSize.height - radius - borderWidthOffset;
|
|
break;
|
|
}
|
|
|
|
// Calculate the circle centers and start/end angles.
|
|
xCenter = isLeft ?
|
|
radius + borderWidthOffset :
|
|
elementSize.width - radius - borderWidthOffset;
|
|
yCenter = isTop ?
|
|
radius + borderWidthOffset :
|
|
elementSize.height - radius - borderWidthOffset;
|
|
startAngle = angleInterval * i;
|
|
endAngle = startAngle + angleInterval;
|
|
|
|
// Append the radius, angles, and coordinates to their arrays.
|
|
this.radii_[i] = radius;
|
|
this.cornerStarts_[i] = new goog.math.Coordinate(xStart, yStart);
|
|
this.arcCenters_[i] = new goog.math.Coordinate(xCenter, yCenter);
|
|
this.startAngles_[i] = startAngle;
|
|
this.endAngles_[i] = endAngle;
|
|
}
|
|
};
|