1218 lines
28 KiB
JavaScript
1218 lines
28 KiB
JavaScript
/**
|
|
* Copyright (c) 2006-2015, JGraph Ltd
|
|
* Copyright (c) 2006-2015, Gaudenz Alder
|
|
*/
|
|
/**
|
|
* Class: mxXmlCanvas2D
|
|
*
|
|
* Base class for all canvases. The following methods make up the public
|
|
* interface of the canvas 2D for all painting in mxGraph:
|
|
*
|
|
* - <save>, <restore>
|
|
* - <scale>, <translate>, <rotate>
|
|
* - <setAlpha>, <setFillAlpha>, <setStrokeAlpha>, <setFillColor>, <setGradient>,
|
|
* <setStrokeColor>, <setStrokeWidth>, <setDashed>, <setDashPattern>, <setLineCap>,
|
|
* <setLineJoin>, <setMiterLimit>
|
|
* - <setFontColor>, <setFontBackgroundColor>, <setFontBorderColor>, <setFontSize>,
|
|
* <setFontFamily>, <setFontStyle>
|
|
* - <setShadow>, <setShadowColor>, <setShadowAlpha>, <setShadowOffset>
|
|
* - <rect>, <roundrect>, <ellipse>, <image>, <text>
|
|
* - <begin>, <moveTo>, <lineTo>, <quadTo>, <curveTo>
|
|
* - <stroke>, <fill>, <fillAndStroke>
|
|
*
|
|
* <mxAbstractCanvas2D.arcTo> is an additional method for drawing paths. This is
|
|
* a synthetic method, meaning that it is turned into a sequence of curves by
|
|
* default. Subclassers may add native support for arcs.
|
|
*
|
|
* Constructor: mxXmlCanvas2D
|
|
*
|
|
* Constructs a new abstract canvas.
|
|
*/
|
|
function mxXmlCanvas2D(root)
|
|
{
|
|
mxAbstractCanvas2D.call(this);
|
|
|
|
/**
|
|
* Variable: root
|
|
*
|
|
* Reference to the container for the SVG content.
|
|
*/
|
|
this.root = root;
|
|
|
|
// Writes default settings;
|
|
this.writeDefaults();
|
|
};
|
|
|
|
/**
|
|
* Extends mxAbstractCanvas2D
|
|
*/
|
|
mxUtils.extend(mxXmlCanvas2D, mxAbstractCanvas2D);
|
|
|
|
/**
|
|
* Variable: textEnabled
|
|
*
|
|
* Specifies if text output should be enabled. Default is true.
|
|
*/
|
|
mxXmlCanvas2D.prototype.textEnabled = true;
|
|
|
|
/**
|
|
* Variable: compressed
|
|
*
|
|
* Specifies if the output should be compressed by removing redundant calls.
|
|
* Default is true.
|
|
*/
|
|
mxXmlCanvas2D.prototype.compressed = true;
|
|
|
|
/**
|
|
* Function: writeDefaults
|
|
*
|
|
* Writes the rendering defaults to <root>:
|
|
*/
|
|
mxXmlCanvas2D.prototype.writeDefaults = function()
|
|
{
|
|
var elem;
|
|
|
|
// Writes font defaults
|
|
elem = this.createElement('fontfamily');
|
|
elem.setAttribute('family', mxConstants.DEFAULT_FONTFAMILY);
|
|
this.root.appendChild(elem);
|
|
|
|
elem = this.createElement('fontsize');
|
|
elem.setAttribute('size', mxConstants.DEFAULT_FONTSIZE);
|
|
this.root.appendChild(elem);
|
|
|
|
// Writes shadow defaults
|
|
elem = this.createElement('shadowcolor');
|
|
elem.setAttribute('color', mxConstants.SHADOWCOLOR);
|
|
this.root.appendChild(elem);
|
|
|
|
elem = this.createElement('shadowalpha');
|
|
elem.setAttribute('alpha', mxConstants.SHADOW_OPACITY);
|
|
this.root.appendChild(elem);
|
|
|
|
elem = this.createElement('shadowoffset');
|
|
elem.setAttribute('dx', mxConstants.SHADOW_OFFSET_X);
|
|
elem.setAttribute('dy', mxConstants.SHADOW_OFFSET_Y);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: format
|
|
*
|
|
* Returns a formatted number with 2 decimal places.
|
|
*/
|
|
mxXmlCanvas2D.prototype.format = function(value)
|
|
{
|
|
return parseFloat(parseFloat(value).toFixed(2));
|
|
};
|
|
|
|
/**
|
|
* Function: createElement
|
|
*
|
|
* Creates the given element using the owner document of <root>.
|
|
*/
|
|
mxXmlCanvas2D.prototype.createElement = function(name)
|
|
{
|
|
return this.root.ownerDocument.createElement(name);
|
|
};
|
|
|
|
/**
|
|
* Function: save
|
|
*
|
|
* Saves the drawing state.
|
|
*/
|
|
mxXmlCanvas2D.prototype.save = function()
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
mxAbstractCanvas2D.prototype.save.apply(this, arguments);
|
|
}
|
|
|
|
this.root.appendChild(this.createElement('save'));
|
|
};
|
|
|
|
/**
|
|
* Function: restore
|
|
*
|
|
* Restores the drawing state.
|
|
*/
|
|
mxXmlCanvas2D.prototype.restore = function()
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
mxAbstractCanvas2D.prototype.restore.apply(this, arguments);
|
|
}
|
|
|
|
this.root.appendChild(this.createElement('restore'));
|
|
};
|
|
|
|
/**
|
|
* Function: scale
|
|
*
|
|
* Scales the output.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* scale - Number that represents the scale where 1 is equal to 100%.
|
|
*/
|
|
mxXmlCanvas2D.prototype.scale = function(value)
|
|
{
|
|
var elem = this.createElement('scale');
|
|
elem.setAttribute('scale', value);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: translate
|
|
*
|
|
* Translates the output.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* dx - Number that specifies the horizontal translation.
|
|
* dy - Number that specifies the vertical translation.
|
|
*/
|
|
mxXmlCanvas2D.prototype.translate = function(dx, dy)
|
|
{
|
|
var elem = this.createElement('translate');
|
|
elem.setAttribute('dx', this.format(dx));
|
|
elem.setAttribute('dy', this.format(dy));
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: rotate
|
|
*
|
|
* Rotates and/or flips the output around a given center. (Note: Due to
|
|
* limitations in VML, the rotation cannot be concatenated.)
|
|
*
|
|
* Parameters:
|
|
*
|
|
* theta - Number that represents the angle of the rotation (in degrees).
|
|
* flipH - Boolean indicating if the output should be flipped horizontally.
|
|
* flipV - Boolean indicating if the output should be flipped vertically.
|
|
* cx - Number that represents the x-coordinate of the rotation center.
|
|
* cy - Number that represents the y-coordinate of the rotation center.
|
|
*/
|
|
mxXmlCanvas2D.prototype.rotate = function(theta, flipH, flipV, cx, cy)
|
|
{
|
|
var elem = this.createElement('rotate');
|
|
|
|
if (theta != 0 || flipH || flipV)
|
|
{
|
|
elem.setAttribute('theta', this.format(theta));
|
|
elem.setAttribute('flipH', (flipH) ? '1' : '0');
|
|
elem.setAttribute('flipV', (flipV) ? '1' : '0');
|
|
elem.setAttribute('cx', this.format(cx));
|
|
elem.setAttribute('cy', this.format(cy));
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: setAlpha
|
|
*
|
|
* Sets the current alpha.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Number that represents the new alpha. Possible values are between
|
|
* 1 (opaque) and 0 (transparent).
|
|
*/
|
|
mxXmlCanvas2D.prototype.setAlpha = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.alpha == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setAlpha.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('alpha');
|
|
elem.setAttribute('alpha', this.format(value));
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setFillAlpha
|
|
*
|
|
* Sets the current fill alpha.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Number that represents the new fill alpha. Possible values are between
|
|
* 1 (opaque) and 0 (transparent).
|
|
*/
|
|
mxXmlCanvas2D.prototype.setFillAlpha = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.fillAlpha == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setFillAlpha.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('fillalpha');
|
|
elem.setAttribute('alpha', this.format(value));
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setStrokeAlpha
|
|
*
|
|
* Sets the current stroke alpha.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Number that represents the new stroke alpha. Possible values are between
|
|
* 1 (opaque) and 0 (transparent).
|
|
*/
|
|
mxXmlCanvas2D.prototype.setStrokeAlpha = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.strokeAlpha == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setStrokeAlpha.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('strokealpha');
|
|
elem.setAttribute('alpha', this.format(value));
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setFillColor
|
|
*
|
|
* Sets the current fill color.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Hexadecimal representation of the color or 'none'.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setFillColor = function(value)
|
|
{
|
|
if (value == mxConstants.NONE)
|
|
{
|
|
value = null;
|
|
}
|
|
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.fillColor == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setFillColor.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('fillcolor');
|
|
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setGradient
|
|
*
|
|
* Sets the gradient. Note that the coordinates may be ignored by some implementations.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* color1 - Hexadecimal representation of the start color.
|
|
* color2 - Hexadecimal representation of the end color.
|
|
* x - X-coordinate of the gradient region.
|
|
* y - y-coordinate of the gradient region.
|
|
* w - Width of the gradient region.
|
|
* h - Height of the gradient region.
|
|
* direction - One of <mxConstants.DIRECTION_NORTH>, <mxConstants.DIRECTION_EAST>,
|
|
* <mxConstants.DIRECTION_SOUTH> or <mxConstants.DIRECTION_WEST>.
|
|
* alpha1 - Optional alpha of the start color. Default is 1. Possible values
|
|
* are between 1 (opaque) and 0 (transparent).
|
|
* alpha2 - Optional alpha of the end color. Default is 1. Possible values
|
|
* are between 1 (opaque) and 0 (transparent).
|
|
*/
|
|
mxXmlCanvas2D.prototype.setGradient = function(color1, color2, x, y, w, h, direction, alpha1, alpha2)
|
|
{
|
|
if (color1 != null && color2 != null)
|
|
{
|
|
mxAbstractCanvas2D.prototype.setGradient.apply(this, arguments);
|
|
|
|
var elem = this.createElement('gradient');
|
|
elem.setAttribute('c1', color1);
|
|
elem.setAttribute('c2', color2);
|
|
elem.setAttribute('x', this.format(x));
|
|
elem.setAttribute('y', this.format(y));
|
|
elem.setAttribute('w', this.format(w));
|
|
elem.setAttribute('h', this.format(h));
|
|
|
|
// Default direction is south
|
|
if (direction != null)
|
|
{
|
|
elem.setAttribute('direction', direction);
|
|
}
|
|
|
|
if (alpha1 != null)
|
|
{
|
|
elem.setAttribute('alpha1', alpha1);
|
|
}
|
|
|
|
if (alpha2 != null)
|
|
{
|
|
elem.setAttribute('alpha2', alpha2);
|
|
}
|
|
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: setStrokeColor
|
|
*
|
|
* Sets the current stroke color.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Hexadecimal representation of the color or 'none'.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setStrokeColor = function(value)
|
|
{
|
|
if (value == mxConstants.NONE)
|
|
{
|
|
value = null;
|
|
}
|
|
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.strokeColor == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setStrokeColor.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('strokecolor');
|
|
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setStrokeWidth
|
|
*
|
|
* Sets the current stroke width.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Numeric representation of the stroke width.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setStrokeWidth = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.strokeWidth == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setStrokeWidth.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('strokewidth');
|
|
elem.setAttribute('width', this.format(value));
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setDashed
|
|
*
|
|
* Enables or disables dashed lines.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Boolean that specifies if dashed lines should be enabled.
|
|
* value - Boolean that specifies if the stroke width should be ignored
|
|
* for the dash pattern. Default is false.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setDashed = function(value, fixDash)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.dashed == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setDashed.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('dashed');
|
|
elem.setAttribute('dashed', (value) ? '1' : '0');
|
|
|
|
if (fixDash != null)
|
|
{
|
|
elem.setAttribute('fixDash', (fixDash) ? '1' : '0');
|
|
}
|
|
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setDashPattern
|
|
*
|
|
* Sets the current dash pattern. Default is '3 3'.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - String that represents the dash pattern, which is a sequence of
|
|
* numbers defining the length of the dashes and the length of the spaces
|
|
* between the dashes. The lengths are relative to the line width - a length
|
|
* of 1 is equals to the line width.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setDashPattern = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.dashPattern == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setDashPattern.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('dashpattern');
|
|
elem.setAttribute('pattern', value);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setLineCap
|
|
*
|
|
* Sets the line cap. Default is 'flat' which corresponds to 'butt' in SVG.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - String that represents the line cap. Possible values are flat, round
|
|
* and square.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setLineCap = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.lineCap == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setLineCap.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('linecap');
|
|
elem.setAttribute('cap', value);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setLineJoin
|
|
*
|
|
* Sets the line join. Default is 'miter'.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - String that represents the line join. Possible values are miter,
|
|
* round and bevel.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setLineJoin = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.lineJoin == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setLineJoin.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('linejoin');
|
|
elem.setAttribute('join', value);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setMiterLimit
|
|
*
|
|
* Sets the miter limit. Default is 10.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Number that represents the miter limit.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setMiterLimit = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.miterLimit == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setMiterLimit.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('miterlimit');
|
|
elem.setAttribute('limit', value);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setFontColor
|
|
*
|
|
* Sets the current font color. Default is '#000000'.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Hexadecimal representation of the color or 'none'.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setFontColor = function(value)
|
|
{
|
|
if (this.textEnabled)
|
|
{
|
|
if (value == mxConstants.NONE)
|
|
{
|
|
value = null;
|
|
}
|
|
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.fontColor == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setFontColor.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('fontcolor');
|
|
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: setFontBackgroundColor
|
|
*
|
|
* Sets the current font background color.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Hexadecimal representation of the color or 'none'.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setFontBackgroundColor = function(value)
|
|
{
|
|
if (this.textEnabled)
|
|
{
|
|
if (value == mxConstants.NONE)
|
|
{
|
|
value = null;
|
|
}
|
|
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.fontBackgroundColor == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setFontBackgroundColor.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('fontbackgroundcolor');
|
|
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: setFontBorderColor
|
|
*
|
|
* Sets the current font border color.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Hexadecimal representation of the color or 'none'.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setFontBorderColor = function(value)
|
|
{
|
|
if (this.textEnabled)
|
|
{
|
|
if (value == mxConstants.NONE)
|
|
{
|
|
value = null;
|
|
}
|
|
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.fontBorderColor == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setFontBorderColor.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('fontbordercolor');
|
|
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: setFontSize
|
|
*
|
|
* Sets the current font size. Default is <mxConstants.DEFAULT_FONTSIZE>.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Numeric representation of the font size.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setFontSize = function(value)
|
|
{
|
|
if (this.textEnabled)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.fontSize == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setFontSize.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('fontsize');
|
|
elem.setAttribute('size', value);
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: setFontFamily
|
|
*
|
|
* Sets the current font family. Default is <mxConstants.DEFAULT_FONTFAMILY>.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - String representation of the font family. This handles the same
|
|
* values as the CSS font-family property.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setFontFamily = function(value)
|
|
{
|
|
if (this.textEnabled)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.fontFamily == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setFontFamily.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('fontfamily');
|
|
elem.setAttribute('family', value);
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: setFontStyle
|
|
*
|
|
* Sets the current font style.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Numeric representation of the font family. This is the sum of the
|
|
* font styles from <mxConstants>.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setFontStyle = function(value)
|
|
{
|
|
if (this.textEnabled)
|
|
{
|
|
if (value == null)
|
|
{
|
|
value = 0;
|
|
}
|
|
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.fontStyle == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setFontStyle.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('fontstyle');
|
|
elem.setAttribute('style', value);
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: setShadow
|
|
*
|
|
* Enables or disables shadows.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Boolean that specifies if shadows should be enabled.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setShadow = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.shadow == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setShadow.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('shadow');
|
|
elem.setAttribute('enabled', (value) ? '1' : '0');
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setShadowColor
|
|
*
|
|
* Sets the current shadow color. Default is <mxConstants.SHADOWCOLOR>.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Hexadecimal representation of the color or 'none'.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setShadowColor = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (value == mxConstants.NONE)
|
|
{
|
|
value = null;
|
|
}
|
|
|
|
if (this.state.shadowColor == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setShadowColor.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('shadowcolor');
|
|
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: setShadowAlpha
|
|
*
|
|
* Sets the current shadows alpha. Default is <mxConstants.SHADOW_OPACITY>.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* value - Number that represents the new alpha. Possible values are between
|
|
* 1 (opaque) and 0 (transparent).
|
|
*/
|
|
mxXmlCanvas2D.prototype.setShadowAlpha = function(value)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.shadowAlpha == value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setShadowAlpha.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('shadowalpha');
|
|
elem.setAttribute('alpha', value);
|
|
this.root.appendChild(elem);
|
|
|
|
};
|
|
|
|
/**
|
|
* Function: setShadowOffset
|
|
*
|
|
* Sets the current shadow offset.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* dx - Number that represents the horizontal offset of the shadow.
|
|
* dy - Number that represents the vertical offset of the shadow.
|
|
*/
|
|
mxXmlCanvas2D.prototype.setShadowOffset = function(dx, dy)
|
|
{
|
|
if (this.compressed)
|
|
{
|
|
if (this.state.shadowDx == dx && this.state.shadowDy == dy)
|
|
{
|
|
return;
|
|
}
|
|
|
|
mxAbstractCanvas2D.prototype.setShadowOffset.apply(this, arguments);
|
|
}
|
|
|
|
var elem = this.createElement('shadowoffset');
|
|
elem.setAttribute('dx', dx);
|
|
elem.setAttribute('dy', dy);
|
|
this.root.appendChild(elem);
|
|
|
|
};
|
|
|
|
/**
|
|
* Function: rect
|
|
*
|
|
* Puts a rectangle into the drawing buffer.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x - Number that represents the x-coordinate of the rectangle.
|
|
* y - Number that represents the y-coordinate of the rectangle.
|
|
* w - Number that represents the width of the rectangle.
|
|
* h - Number that represents the height of the rectangle.
|
|
*/
|
|
mxXmlCanvas2D.prototype.rect = function(x, y, w, h)
|
|
{
|
|
var elem = this.createElement('rect');
|
|
elem.setAttribute('x', this.format(x));
|
|
elem.setAttribute('y', this.format(y));
|
|
elem.setAttribute('w', this.format(w));
|
|
elem.setAttribute('h', this.format(h));
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: roundrect
|
|
*
|
|
* Puts a rounded rectangle into the drawing buffer.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x - Number that represents the x-coordinate of the rectangle.
|
|
* y - Number that represents the y-coordinate of the rectangle.
|
|
* w - Number that represents the width of the rectangle.
|
|
* h - Number that represents the height of the rectangle.
|
|
* dx - Number that represents the horizontal rounding.
|
|
* dy - Number that represents the vertical rounding.
|
|
*/
|
|
mxXmlCanvas2D.prototype.roundrect = function(x, y, w, h, dx, dy)
|
|
{
|
|
var elem = this.createElement('roundrect');
|
|
elem.setAttribute('x', this.format(x));
|
|
elem.setAttribute('y', this.format(y));
|
|
elem.setAttribute('w', this.format(w));
|
|
elem.setAttribute('h', this.format(h));
|
|
elem.setAttribute('dx', this.format(dx));
|
|
elem.setAttribute('dy', this.format(dy));
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: ellipse
|
|
*
|
|
* Puts an ellipse into the drawing buffer.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x - Number that represents the x-coordinate of the ellipse.
|
|
* y - Number that represents the y-coordinate of the ellipse.
|
|
* w - Number that represents the width of the ellipse.
|
|
* h - Number that represents the height of the ellipse.
|
|
*/
|
|
mxXmlCanvas2D.prototype.ellipse = function(x, y, w, h)
|
|
{
|
|
var elem = this.createElement('ellipse');
|
|
elem.setAttribute('x', this.format(x));
|
|
elem.setAttribute('y', this.format(y));
|
|
elem.setAttribute('w', this.format(w));
|
|
elem.setAttribute('h', this.format(h));
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: image
|
|
*
|
|
* Paints an image.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x - Number that represents the x-coordinate of the image.
|
|
* y - Number that represents the y-coordinate of the image.
|
|
* w - Number that represents the width of the image.
|
|
* h - Number that represents the height of the image.
|
|
* src - String that specifies the URL of the image.
|
|
* aspect - Boolean indicating if the aspect of the image should be preserved.
|
|
* flipH - Boolean indicating if the image should be flipped horizontally.
|
|
* flipV - Boolean indicating if the image should be flipped vertically.
|
|
*/
|
|
mxXmlCanvas2D.prototype.image = function(x, y, w, h, src, aspect, flipH, flipV)
|
|
{
|
|
src = this.converter.convert(src);
|
|
|
|
// LATER: Add option for embedding images as base64.
|
|
var elem = this.createElement('image');
|
|
elem.setAttribute('x', this.format(x));
|
|
elem.setAttribute('y', this.format(y));
|
|
elem.setAttribute('w', this.format(w));
|
|
elem.setAttribute('h', this.format(h));
|
|
elem.setAttribute('src', src);
|
|
elem.setAttribute('aspect', (aspect) ? '1' : '0');
|
|
elem.setAttribute('flipH', (flipH) ? '1' : '0');
|
|
elem.setAttribute('flipV', (flipV) ? '1' : '0');
|
|
this.root.appendChild(elem);
|
|
};
|
|
|
|
/**
|
|
* Function: begin
|
|
*
|
|
* Starts a new path and puts it into the drawing buffer.
|
|
*/
|
|
mxXmlCanvas2D.prototype.begin = function()
|
|
{
|
|
this.root.appendChild(this.createElement('begin'));
|
|
this.lastX = 0;
|
|
this.lastY = 0;
|
|
};
|
|
|
|
/**
|
|
* Function: moveTo
|
|
*
|
|
* Moves the current path the given point.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x - Number that represents the x-coordinate of the point.
|
|
* y - Number that represents the y-coordinate of the point.
|
|
*/
|
|
mxXmlCanvas2D.prototype.moveTo = function(x, y)
|
|
{
|
|
var elem = this.createElement('move');
|
|
elem.setAttribute('x', this.format(x));
|
|
elem.setAttribute('y', this.format(y));
|
|
this.root.appendChild(elem);
|
|
this.lastX = x;
|
|
this.lastY = y;
|
|
};
|
|
|
|
/**
|
|
* Function: lineTo
|
|
*
|
|
* Draws a line to the given coordinates.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x - Number that represents the x-coordinate of the endpoint.
|
|
* y - Number that represents the y-coordinate of the endpoint.
|
|
*/
|
|
mxXmlCanvas2D.prototype.lineTo = function(x, y)
|
|
{
|
|
var elem = this.createElement('line');
|
|
elem.setAttribute('x', this.format(x));
|
|
elem.setAttribute('y', this.format(y));
|
|
this.root.appendChild(elem);
|
|
this.lastX = x;
|
|
this.lastY = y;
|
|
};
|
|
|
|
/**
|
|
* Function: quadTo
|
|
*
|
|
* Adds a quadratic curve to the current path.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x1 - Number that represents the x-coordinate of the control point.
|
|
* y1 - Number that represents the y-coordinate of the control point.
|
|
* x2 - Number that represents the x-coordinate of the endpoint.
|
|
* y2 - Number that represents the y-coordinate of the endpoint.
|
|
*/
|
|
mxXmlCanvas2D.prototype.quadTo = function(x1, y1, x2, y2)
|
|
{
|
|
var elem = this.createElement('quad');
|
|
elem.setAttribute('x1', this.format(x1));
|
|
elem.setAttribute('y1', this.format(y1));
|
|
elem.setAttribute('x2', this.format(x2));
|
|
elem.setAttribute('y2', this.format(y2));
|
|
this.root.appendChild(elem);
|
|
this.lastX = x2;
|
|
this.lastY = y2;
|
|
};
|
|
|
|
/**
|
|
* Function: curveTo
|
|
*
|
|
* Adds a bezier curve to the current path.
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x1 - Number that represents the x-coordinate of the first control point.
|
|
* y1 - Number that represents the y-coordinate of the first control point.
|
|
* x2 - Number that represents the x-coordinate of the second control point.
|
|
* y2 - Number that represents the y-coordinate of the second control point.
|
|
* x3 - Number that represents the x-coordinate of the endpoint.
|
|
* y3 - Number that represents the y-coordinate of the endpoint.
|
|
*/
|
|
mxXmlCanvas2D.prototype.curveTo = function(x1, y1, x2, y2, x3, y3)
|
|
{
|
|
var elem = this.createElement('curve');
|
|
elem.setAttribute('x1', this.format(x1));
|
|
elem.setAttribute('y1', this.format(y1));
|
|
elem.setAttribute('x2', this.format(x2));
|
|
elem.setAttribute('y2', this.format(y2));
|
|
elem.setAttribute('x3', this.format(x3));
|
|
elem.setAttribute('y3', this.format(y3));
|
|
this.root.appendChild(elem);
|
|
this.lastX = x3;
|
|
this.lastY = y3;
|
|
};
|
|
|
|
/**
|
|
* Function: close
|
|
*
|
|
* Closes the current path.
|
|
*/
|
|
mxXmlCanvas2D.prototype.close = function()
|
|
{
|
|
this.root.appendChild(this.createElement('close'));
|
|
};
|
|
|
|
/**
|
|
* Function: text
|
|
*
|
|
* Paints the given text. Possible values for format are empty string for
|
|
* plain text and html for HTML markup. Background and border color as well
|
|
* as clipping is not available in plain text labels for VML. HTML labels
|
|
* are not available as part of shapes with no foreignObject support in SVG
|
|
* (eg. IE9, IE10).
|
|
*
|
|
* Parameters:
|
|
*
|
|
* x - Number that represents the x-coordinate of the text.
|
|
* y - Number that represents the y-coordinate of the text.
|
|
* w - Number that represents the available width for the text or 0 for automatic width.
|
|
* h - Number that represents the available height for the text or 0 for automatic height.
|
|
* str - String that specifies the text to be painted.
|
|
* align - String that represents the horizontal alignment.
|
|
* valign - String that represents the vertical alignment.
|
|
* wrap - Boolean that specifies if word-wrapping is enabled. Requires w > 0.
|
|
* format - Empty string for plain text or 'html' for HTML markup.
|
|
* overflow - Specifies the overflow behaviour of the label. Requires w > 0 and/or h > 0.
|
|
* clip - Boolean that specifies if the label should be clipped. Requires w > 0 and/or h > 0.
|
|
* rotation - Number that specifies the angle of the rotation around the anchor point of the text.
|
|
* dir - Optional string that specifies the text direction. Possible values are rtl and lrt.
|
|
*/
|
|
mxXmlCanvas2D.prototype.text = function(x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir)
|
|
{
|
|
if (this.textEnabled && str != null)
|
|
{
|
|
if (mxUtils.isNode(str))
|
|
{
|
|
str = mxUtils.getOuterHtml(str);
|
|
}
|
|
|
|
var elem = this.createElement('text');
|
|
elem.setAttribute('x', this.format(x));
|
|
elem.setAttribute('y', this.format(y));
|
|
elem.setAttribute('w', this.format(w));
|
|
elem.setAttribute('h', this.format(h));
|
|
elem.setAttribute('str', str);
|
|
|
|
if (align != null)
|
|
{
|
|
elem.setAttribute('align', align);
|
|
}
|
|
|
|
if (valign != null)
|
|
{
|
|
elem.setAttribute('valign', valign);
|
|
}
|
|
|
|
elem.setAttribute('wrap', (wrap) ? '1' : '0');
|
|
|
|
if (format == null)
|
|
{
|
|
format = '';
|
|
}
|
|
|
|
elem.setAttribute('format', format);
|
|
|
|
if (overflow != null)
|
|
{
|
|
elem.setAttribute('overflow', overflow);
|
|
}
|
|
|
|
if (clip != null)
|
|
{
|
|
elem.setAttribute('clip', (clip) ? '1' : '0');
|
|
}
|
|
|
|
if (rotation != null)
|
|
{
|
|
elem.setAttribute('rotation', rotation);
|
|
}
|
|
|
|
if (dir != null)
|
|
{
|
|
elem.setAttribute('dir', dir);
|
|
}
|
|
|
|
this.root.appendChild(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function: stroke
|
|
*
|
|
* Paints the outline of the current drawing buffer.
|
|
*/
|
|
mxXmlCanvas2D.prototype.stroke = function()
|
|
{
|
|
this.root.appendChild(this.createElement('stroke'));
|
|
};
|
|
|
|
/**
|
|
* Function: fill
|
|
*
|
|
* Fills the current drawing buffer.
|
|
*/
|
|
mxXmlCanvas2D.prototype.fill = function()
|
|
{
|
|
this.root.appendChild(this.createElement('fill'));
|
|
};
|
|
|
|
/**
|
|
* Function: fillAndStroke
|
|
*
|
|
* Fills the current drawing buffer and its outline.
|
|
*/
|
|
mxXmlCanvas2D.prototype.fillAndStroke = function()
|
|
{
|
|
this.root.appendChild(this.createElement('fillstroke'));
|
|
};
|