blob: f9305b1ff71e3325e2c114541598f9418c9ceec4 [file] [log] [blame]
/**
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxLabel
*
* Extends <mxShape> to implement an image shape with a label.
* This shape is registered under <mxConstants.SHAPE_LABEL> in
* <mxCellRenderer>.
*
* Constructor: mxLabel
*
* Constructs a new label shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxLabel(bounds, fill, stroke, strokewidth)
{
mxRectangleShape.call(this, bounds, fill, stroke, strokewidth);
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxLabel, mxRectangleShape);
/**
* Variable: imageSize
*
* Default width and height for the image. Default is
* <mxConstants.DEFAULT_IMAGESIZE>.
*/
mxLabel.prototype.imageSize = mxConstants.DEFAULT_IMAGESIZE;
/**
* Variable: spacing
*
* Default value for image spacing. Default is 2.
*/
mxLabel.prototype.spacing = 2;
/**
* Variable: indicatorSize
*
* Default width and height for the indicicator. Default is 10.
*/
mxLabel.prototype.indicatorSize = 10;
/**
* Variable: indicatorSpacing
*
* Default spacing between image and indicator. Default is 2.
*/
mxLabel.prototype.indicatorSpacing = 2;
/**
* Function: init
*
* Initializes the shape and the <indicator>.
*/
mxLabel.prototype.init = function(container)
{
mxShape.prototype.init.apply(this, arguments);
if (this.indicatorShape != null)
{
this.indicator = new this.indicatorShape();
this.indicator.dialect = this.dialect;
this.indicator.init(this.node);
}
};
/**
* Function: redraw
*
* Reconfigures this shape. This will update the colors of the indicator
* and reconfigure it if required.
*/
mxLabel.prototype.redraw = function()
{
if (this.indicator != null)
{
this.indicator.fill = this.indicatorColor;
this.indicator.stroke = this.indicatorStrokeColor;
this.indicator.gradient = this.indicatorGradientColor;
this.indicator.direction = this.indicatorDirection;
}
mxShape.prototype.redraw.apply(this, arguments);
};
/**
* Function: isHtmlAllowed
*
* Returns true for non-rounded, non-rotated shapes with no glass gradient and
* no indicator shape.
*/
mxLabel.prototype.isHtmlAllowed = function()
{
return mxRectangleShape.prototype.isHtmlAllowed.apply(this, arguments) &&
this.indicatorColor == null && this.indicatorShape == null;
};
/**
* Function: paintForeground
*
* Generic background painting implementation.
*/
mxLabel.prototype.paintForeground = function(c, x, y, w, h)
{
this.paintImage(c, x, y, w, h);
this.paintIndicator(c, x, y, w, h);
mxRectangleShape.prototype.paintForeground.apply(this, arguments);
};
/**
* Function: paintImage
*
* Generic background painting implementation.
*/
mxLabel.prototype.paintImage = function(c, x, y, w, h)
{
if (this.image != null)
{
var bounds = this.getImageBounds(x, y, w, h);
c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.image, false, false, false);
}
};
/**
* Function: getImageBounds
*
* Generic background painting implementation.
*/
mxLabel.prototype.getImageBounds = function(x, y, w, h)
{
var align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
var valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
var width = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_WIDTH, mxConstants.DEFAULT_IMAGESIZE);
var height = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_HEIGHT, mxConstants.DEFAULT_IMAGESIZE);
var spacing = mxUtils.getNumber(this.style, mxConstants.STYLE_SPACING, this.spacing) + 5;
if (align == mxConstants.ALIGN_CENTER)
{
x += (w - width) / 2;
}
else if (align == mxConstants.ALIGN_RIGHT)
{
x += w - width - spacing;
}
else // default is left
{
x += spacing;
}
if (valign == mxConstants.ALIGN_TOP)
{
y += spacing;
}
else if (valign == mxConstants.ALIGN_BOTTOM)
{
y += h - height - spacing;
}
else // default is middle
{
y += (h - height) / 2;
}
return new mxRectangle(x, y, width, height);
};
/**
* Function: paintIndicator
*
* Generic background painting implementation.
*/
mxLabel.prototype.paintIndicator = function(c, x, y, w, h)
{
if (this.indicator != null)
{
this.indicator.bounds = this.getIndicatorBounds(x, y, w, h);
this.indicator.paint(c);
}
else if (this.indicatorImage != null)
{
var bounds = this.getIndicatorBounds(x, y, w, h);
c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.indicatorImage, false, false, false);
}
};
/**
* Function: getIndicatorBounds
*
* Generic background painting implementation.
*/
mxLabel.prototype.getIndicatorBounds = function(x, y, w, h)
{
var align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
var valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
var width = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_WIDTH, this.indicatorSize);
var height = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_HEIGHT, this.indicatorSize);
var spacing = this.spacing + 5;
if (align == mxConstants.ALIGN_RIGHT)
{
x += w - width - spacing;
}
else if (align == mxConstants.ALIGN_CENTER)
{
x += (w - width) / 2;
}
else // default is left
{
x += spacing;
}
if (valign == mxConstants.ALIGN_BOTTOM)
{
y += h - height - spacing;
}
else if (valign == mxConstants.ALIGN_TOP)
{
y += spacing;
}
else // default is middle
{
y += (h - height) / 2;
}
return new mxRectangle(x, y, width, height);
};
/**
* Function: redrawHtmlShape
*
* Generic background painting implementation.
*/
mxLabel.prototype.redrawHtmlShape = function()
{
mxRectangleShape.prototype.redrawHtmlShape.apply(this, arguments);
// Removes all children
while(this.node.hasChildNodes())
{
this.node.removeChild(this.node.lastChild);
}
if (this.image != null)
{
var node = document.createElement('img');
node.style.position = 'relative';
node.setAttribute('border', '0');
var bounds = this.getImageBounds(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
bounds.x -= this.bounds.x;
bounds.y -= this.bounds.y;
node.style.left = Math.round(bounds.x) + 'px';
node.style.top = Math.round(bounds.y) + 'px';
node.style.width = Math.round(bounds.width) + 'px';
node.style.height = Math.round(bounds.height) + 'px';
node.src = this.image;
this.node.appendChild(node);
}
};