mxShape

Base class for all shapes.  A shape in mxGraph is a separate implementation for SVG, VML and HTML.  Which implementation to use is controlled by the dialect property which is assigned from within the mxCellRenderer when the shape is created.  The dialect must be assigned for a shape, and it does normally depend on the browser and the confiuration of the graph (see mxGraph rendering hint).

For each supported shape in SVG and VML, a corresponding shape exists in mxGraph, namely for text, image, rectangle, rhombus, ellipse and polyline.  The other shapes are a combination of these shapes (eg. label and swimlane) or they consist of one or more (filled) path objects (eg. actor and cylinder).  The HTML implementation is optional but may be required for a HTML-only view of the graph.

Custom Shapes

To extend from this class, the basic code looks as follows.  In the special case where the custom shape consists only of one filled region or one filled region and an additional stroke the mxActor and mxCylinder should be subclassed, respectively.

function CustomShape() { }

CustomShape.prototype = new mxShape();
CustomShape.prototype.constructor = CustomShape;

To register a custom shape in an existing graph instance, one must register the shape under a new name in the graph’s cell renderer as follows:

mxCellRenderer.registerShape('customShape', CustomShape);

The second argument is the name of the constructor.

In order to use the shape you can refer to the given name above in a stylesheet.  For example, to change the shape for the default vertex style, the following code is used:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'customShape';
Summary
mxShapeBase class for all shapes.
Functions
mxShapeConstructs a new shape.
Variables
dialectHolds the dialect in which the shape is to be painted.
scaleHolds the scale in which the shape is being painted.
boundsHolds the mxRectangle that specifies the bounds of this shape.
pointsHolds the array of mxPoints that specify the points of this shape.
nodeHolds the outermost DOM node that represents this shape.
stateOptional reference to the corresponding mxCellState.
styleOptional reference to the style of the corresponding mxCellState.
boundingBoxContains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
stencilHolds the mxStencil that defines the shape.
svgStrokeToleranceEvent-tolerance for SVG strokes (in px).
pointerEventsSpecifies if pointer events should be handled.
svgPointerEventsSpecifies if pointer events should be handled.
shapePointerEventsSpecifies if pointer events outside of shape should be handled.
stencilPointerEventsSpecifies if pointer events outside of stencils should be handled.
vmlScaleScale for improving the precision of VML rendering.
outlineSpecifies if the shape should be drawn as an outline.
visibleSpecifies if the shape is visible.
Functions
initInitializes the shape by creaing the DOM node using create and adding it into the given container.
isParseVmlSpecifies if any VML should be added via insertAdjacentHtml to the DOM.
isHtmlAllowedReturns true if HTML is allowed for this shape.
getSvgScreenOffsetReturns 0, or 0.5 if <strokewidth> % 2 == 1.
createCreates and returns the DOM node(s) for the shape in the given container.
createSvgCreates and returns the SVG node(s) to represent this shape.
createVmlCreates and returns the VML node to represent this shape.
createHtmlCreates and returns the HTML DOM node(s) to represent this shape.
reconfigureReconfigures this shape.
redrawCreates and returns the SVG node(s) to represent this shape.
clearRemoves all child nodes and resets all CSS.
updateBoundsFromPointsUpdates the bounds based on the points.
getLabelBoundsReturns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
checkBoundsReturns true if the bounds are not null and all of its variables are numeric.
createVmlGroupReturns the temporary element used for rendering in IE8 standards mode.
redrawShapeUpdates the SVG or VML shape.
createCanvasDestroys the given canvas which was used for drawing.
createSvgCanvasCreates and returns an mxSvgCanvas2D for rendering this shape.
createVmlCanvasCreates and returns an mxVmlCanvas2D for rendering this shape.
updateVmlContainerUpdates the bounds of the VML container.
redrawHtmlAllow optimization by replacing VML with HTML.
updateHtmlFiltersAllow optimization by replacing VML with HTML.
mixedModeHtmlAllow optimization by replacing VML with HTML.
mixedModeHtmlAllow optimization by replacing VML with HTML.
destroyCanvasDestroys the given canvas which was used for drawing.
paintGeneric rendering code.
configureCanvasSets the state of the canvas for drawing the shape.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
updateTransformSets the scale and rotation on the given canvas.
paintVertexShapePaints the vertex shape.
paintBackgroundHook for subclassers.
paintForegroundHook for subclassers.
paintEdgeShapeHook for subclassers.
getArcSizeReturns the arc size for the given dimension.
paintGlassEffectPaints the glass gradient effect.
addPointsPaints the given points with rounded corners.
applyApplies the style of the given mxCellState to the shape.
setCursorSets the cursor on the given shape.
getCursorReturns the current cursor.
updateBoundingBoxUpdates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
createBoundingBoxReturns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
augmentBoundingBoxAugments the bounding box with the strokewidth and shadow offsets.
isPaintBoundsInvertedReturns true if the bounds should be inverted.
getRotationReturns the rotation from the style.
getTextRotationReturns the rotation for the text label.
getShapeRotationReturns the actual rotation of the shape.
createTransparentSvgRectangleAdds a transparent rectangle that catches all events.
setTransparentBackgroundImageSets a transparent background CSS style to catch all events.
releaseSvgGradientsPaints the line shape.
destroyDestroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.

Functions

mxShape

function mxShape(stencil)

Constructs a new shape.

Variables

dialect

mxShape.prototype.dialect

Holds the dialect in which the shape is to be painted.  This can be one of the DIALECT constants in mxConstants.

scale

mxShape.prototype.scale

Holds the scale in which the shape is being painted.

bounds

mxShape.prototype.bounds

Holds the mxRectangle that specifies the bounds of this shape.

points

mxShape.prototype.points

Holds the array of mxPoints that specify the points of this shape.

node

mxShape.prototype.node

Holds the outermost DOM node that represents this shape.

state

mxShape.prototype.state

Optional reference to the corresponding mxCellState.

style

mxShape.prototype.style

Optional reference to the style of the corresponding mxCellState.

boundingBox

mxShape.prototype.boundingBox

Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.

stencil

mxShape.prototype.stencil

Holds the mxStencil that defines the shape.

svgStrokeTolerance

mxShape.prototype.svgStrokeTolerance

Event-tolerance for SVG strokes (in px).  Default is 8.  This is only passed to the canvas in createSvgCanvas if pointerEvents is true.

pointerEvents

mxShape.prototype.pointerEvents

Specifies if pointer events should be handled.  Default is true.

svgPointerEvents

mxShape.prototype.svgPointerEvents

Specifies if pointer events should be handled.  Default is true.

shapePointerEvents

mxShape.prototype.shapePointerEvents

Specifies if pointer events outside of shape should be handled.  Default is false.

stencilPointerEvents

mxShape.prototype.stencilPointerEvents

Specifies if pointer events outside of stencils should be handled.  Default is false.  Set this to true for backwards compatibility with the 1.x branch.

vmlScale

mxShape.prototype.vmlScale

Scale for improving the precision of VML rendering.  Default is 1.

outline

mxShape.prototype.outline

Specifies if the shape should be drawn as an outline.  This disables all fill colors and can be used to disable other drawing states that should not be painted for outlines.  Default is false.  This should be set before calling apply.

visible

mxShape.prototype.visible

Specifies if the shape is visible.  Default is true.

Functions

init

mxShape.prototype.init = function(container)

Initializes the shape by creaing the DOM node using create and adding it into the given container.

Parameters

containerDOM node that will contain the shape.

isParseVml

mxShape.prototype.isParseVml = function()

Specifies if any VML should be added via insertAdjacentHtml to the DOM.  This is only needed in IE8 and only if the shape contains VML markup.  This method returns true.

isHtmlAllowed

mxShape.prototype.isHtmlAllowed = function()

Returns true if HTML is allowed for this shape.  This implementation always returns false.

getSvgScreenOffset

mxShape.prototype.getSvgScreenOffset = function()

Returns 0, or 0.5 if <strokewidth> % 2 == 1.

create

mxShape.prototype.create = function(container)

Creates and returns the DOM node(s) for the shape in the given container.  This implementation invokes createSvg, createHtml or createVml depending on the dialect and style settings.

Parameters

containerDOM node that will contain the shape.

createSvg

mxShape.prototype.createSvg = function()

Creates and returns the SVG node(s) to represent this shape.

createVml

mxShape.prototype.createVml = function()

Creates and returns the VML node to represent this shape.

createHtml

mxShape.prototype.createHtml = function()

Creates and returns the HTML DOM node(s) to represent this shape.  This implementation falls back to createVml so that the HTML creation is optional.

reconfigure

mxShape.prototype.reconfigure = function()

Reconfigures this shape.  This will update the colors etc in addition to the bounds or points.

redraw

mxShape.prototype.redraw = function()

Creates and returns the SVG node(s) to represent this shape.

clear

mxShape.prototype.clear = function()

Removes all child nodes and resets all CSS.

updateBoundsFromPoints

mxShape.prototype.updateBoundsFromPoints = function()

Updates the bounds based on the points.

getLabelBounds

mxShape.prototype.getLabelBounds = function(rect)

Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.  This method should not change the rectangle in-place.  This implementation returns the given rect.

checkBounds

mxShape.prototype.checkBounds = function()

Returns true if the bounds are not null and all of its variables are numeric.

createVmlGroup

mxShape.prototype.createVmlGroup = function()

Returns the temporary element used for rendering in IE8 standards mode.

redrawShape

mxShape.prototype.redrawShape = function()

Updates the SVG or VML shape.

createCanvas

mxShape.prototype.createCanvas = function()

Destroys the given canvas which was used for drawing.  This implementation increments the reference counts on all shared gradients used in the canvas.

createSvgCanvas

mxShape.prototype.createSvgCanvas = function()

Creates and returns an mxSvgCanvas2D for rendering this shape.

createVmlCanvas

mxShape.prototype.createVmlCanvas = function()

Creates and returns an mxVmlCanvas2D for rendering this shape.

updateVmlContainer

mxShape.prototype.updateVmlContainer = function()

Updates the bounds of the VML container.

redrawHtml

mxShape.prototype.redrawHtmlShape = function()

Allow optimization by replacing VML with HTML.

updateHtmlFilters

mxShape.prototype.updateHtmlFilters = function(node)

Allow optimization by replacing VML with HTML.

mixedModeHtml

Allow optimization by replacing VML with HTML.

mixedModeHtml

Allow optimization by replacing VML with HTML.

destroyCanvas

mxShape.prototype.destroyCanvas = function(canvas)

Destroys the given canvas which was used for drawing.  This implementation increments the reference counts on all shared gradients used in the canvas.

paint

mxShape.prototype.paint = function(c)

Generic rendering code.

configureCanvas

mxShape.prototype.configureCanvas = function(c,
x,
y,
w,
h)

Sets the state of the canvas for drawing the shape.

getGradientBounds

mxShape.prototype.getGradientBounds = function(c,
x,
y,
w,
h)

Returns the bounding box for the gradient box for this shape.

updateTransform

mxShape.prototype.updateTransform = function(c,
x,
y,
w,
h)

Sets the scale and rotation on the given canvas.

paintVertexShape

mxShape.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Paints the vertex shape.

paintBackground

mxShape.prototype.paintBackground = function(c,
x,
y,
w,
h)

Hook for subclassers.  This implementation is empty.

paintForeground

mxShape.prototype.paintForeground = function(c,
x,
y,
w,
h)

Hook for subclassers.  This implementation is empty.

paintEdgeShape

mxShape.prototype.paintEdgeShape = function(c,
pts)

Hook for subclassers.  This implementation is empty.

getArcSize

mxShape.prototype.getArcSize = function(w,
h)

Returns the arc size for the given dimension.

paintGlassEffect

mxShape.prototype.paintGlassEffect = function(c,
x,
y,
w,
h,
arc)

Paints the glass gradient effect.

addPoints

mxShape.prototype.addPoints = function(c,
pts,
rounded,
arcSize,
close)

Paints the given points with rounded corners.

apply

mxShape.prototype.apply = function(state)

Applies the style of the given mxCellState to the shape.  This implementation assigns the following styles to local fields:

This keeps a reference to the style.  If you need to keep a reference to the cell, you can override this method and store a local reference to state.cell or the mxCellState itself.  If outline should be true, make sure to set it before calling this method.

Parameters

statemxCellState of the corresponding cell.

setCursor

mxShape.prototype.setCursor = function(cursor)

Sets the cursor on the given shape.

Parameters

cursorThe cursor to be used.

getCursor

mxShape.prototype.getCursor = function()

Returns the current cursor.

updateBoundingBox

mxShape.prototype.updateBoundingBox = function()

Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.

createBoundingBox

mxShape.prototype.createBoundingBox = function()

Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.

augmentBoundingBox

mxShape.prototype.augmentBoundingBox = function(bbox)

Augments the bounding box with the strokewidth and shadow offsets.

isPaintBoundsInverted

mxShape.prototype.isPaintBoundsInverted = function()

Returns true if the bounds should be inverted.

getRotation

mxShape.prototype.getRotation = function()

Returns the rotation from the style.

getTextRotation

mxShape.prototype.getTextRotation = function()

Returns the rotation for the text label.

getShapeRotation

mxShape.prototype.getShapeRotation = function()

Returns the actual rotation of the shape.

createTransparentSvgRectangle

mxShape.prototype.createTransparentSvgRectangle = function(x,
y,
w,
h)

Adds a transparent rectangle that catches all events.

setTransparentBackgroundImage

mxShape.prototype.setTransparentBackgroundImage = function(node)

Sets a transparent background CSS style to catch all events.

Paints the line shape.

releaseSvgGradients

mxShape.prototype.releaseSvgGradients = function(grads)

Paints the line shape.

destroy

mxShape.prototype.destroy = function()

Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.

function mxShape(stencil)
Constructs a new shape.
mxShape.prototype.dialect
Holds the dialect in which the shape is to be painted.
mxShape.prototype.scale
Holds the scale in which the shape is being painted.
mxShape.prototype.bounds
Holds the mxRectangle that specifies the bounds of this shape.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxShape.prototype.points
Holds the array of mxPoints that specify the points of this shape.
Implements a 2-dimensional vector with double precision coordinates.
mxShape.prototype.node
Holds the outermost DOM node that represents this shape.
mxShape.prototype.state
Optional reference to the corresponding mxCellState.
Represents the current state of a cell in a given mxGraphView.
mxShape.prototype.style
Optional reference to the style of the corresponding mxCellState.
mxShape.prototype.boundingBox
Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
mxShape.prototype.stencil
Holds the mxStencil that defines the shape.
Implements a generic shape which is based on a XML node as a description.
mxShape.prototype.svgStrokeTolerance
Event-tolerance for SVG strokes (in px).
mxShape.prototype.pointerEvents
Specifies if pointer events should be handled.
mxShape.prototype.svgPointerEvents
Specifies if pointer events should be handled.
mxShape.prototype.shapePointerEvents
Specifies if pointer events outside of shape should be handled.
mxShape.prototype.stencilPointerEvents
Specifies if pointer events outside of stencils should be handled.
mxShape.prototype.vmlScale
Scale for improving the precision of VML rendering.
mxShape.prototype.outline
Specifies if the shape should be drawn as an outline.
mxShape.prototype.visible
Specifies if the shape is visible.
mxShape.prototype.init = function(container)
Initializes the shape by creaing the DOM node using create and adding it into the given container.
mxShape.prototype.create = function(container)
Creates and returns the DOM node(s) for the shape in the given container.
mxShape.prototype.isParseVml = function()
Specifies if any VML should be added via insertAdjacentHtml to the DOM.
mxShape.prototype.isHtmlAllowed = function()
Returns true if HTML is allowed for this shape.
mxShape.prototype.getSvgScreenOffset = function()
Returns 0, or 0.5 if strokewidth % 2 == 1.
mxShape.prototype.createSvg = function()
Creates and returns the SVG node(s) to represent this shape.
mxShape.prototype.createVml = function()
Creates and returns the VML node to represent this shape.
mxShape.prototype.createHtml = function()
Creates and returns the HTML DOM node(s) to represent this shape.
mxShape.prototype.reconfigure = function()
Reconfigures this shape.
mxShape.prototype.redraw = function()
Creates and returns the SVG node(s) to represent this shape.
mxShape.prototype.clear = function()
Removes all child nodes and resets all CSS.
mxShape.prototype.updateBoundsFromPoints = function()
Updates the bounds based on the points.
mxShape.prototype.getLabelBounds = function(rect)
Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
mxShape.prototype.checkBounds = function()
Returns true if the bounds are not null and all of its variables are numeric.
mxShape.prototype.createVmlGroup = function()
Returns the temporary element used for rendering in IE8 standards mode.
mxShape.prototype.redrawShape = function()
Updates the SVG or VML shape.
mxShape.prototype.createCanvas = function()
Destroys the given canvas which was used for drawing.
mxShape.prototype.createSvgCanvas = function()
Creates and returns an mxSvgCanvas2D for rendering this shape.
Extends mxAbstractCanvas2D to implement a canvas for SVG.
mxShape.prototype.createVmlCanvas = function()
Creates and returns an mxVmlCanvas2D for rendering this shape.
Implements a canvas to be used for rendering VML.
mxShape.prototype.updateVmlContainer = function()
Updates the bounds of the VML container.
mxShape.prototype.redrawHtmlShape = function()
Allow optimization by replacing VML with HTML.
mxShape.prototype.updateHtmlFilters = function(node)
Allow optimization by replacing VML with HTML.
mxShape.prototype.destroyCanvas = function(canvas)
Destroys the given canvas which was used for drawing.
mxShape.prototype.paint = function(c)
Generic rendering code.
mxShape.prototype.configureCanvas = function(c,
x,
y,
w,
h)
Sets the state of the canvas for drawing the shape.
mxShape.prototype.getGradientBounds = function(c,
x,
y,
w,
h)
Returns the bounding box for the gradient box for this shape.
mxShape.prototype.updateTransform = function(c,
x,
y,
w,
h)
Sets the scale and rotation on the given canvas.
mxShape.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Paints the vertex shape.
mxShape.prototype.paintBackground = function(c,
x,
y,
w,
h)
Hook for subclassers.
mxShape.prototype.paintForeground = function(c,
x,
y,
w,
h)
Hook for subclassers.
mxShape.prototype.paintEdgeShape = function(c,
pts)
Hook for subclassers.
mxShape.prototype.getArcSize = function(w,
h)
Returns the arc size for the given dimension.
mxShape.prototype.paintGlassEffect = function(c,
x,
y,
w,
h,
arc)
Paints the glass gradient effect.
mxShape.prototype.addPoints = function(c,
pts,
rounded,
arcSize,
close)
Paints the given points with rounded corners.
mxShape.prototype.apply = function(state)
Applies the style of the given mxCellState to the shape.
mxShape.prototype.setCursor = function(cursor)
Sets the cursor on the given shape.
mxShape.prototype.getCursor = function()
Returns the current cursor.
mxShape.prototype.updateBoundingBox = function()
Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
mxShape.prototype.createBoundingBox = function()
Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
mxShape.prototype.augmentBoundingBox = function(bbox)
Augments the bounding box with the strokewidth and shadow offsets.
mxShape.prototype.isPaintBoundsInverted = function()
Returns true if the bounds should be inverted.
mxShape.prototype.getRotation = function()
Returns the rotation from the style.
mxShape.prototype.getTextRotation = function()
Returns the rotation for the text label.
mxShape.prototype.getShapeRotation = function()
Returns the actual rotation of the shape.
mxShape.prototype.createTransparentSvgRectangle = function(x,
y,
w,
h)
Adds a transparent rectangle that catches all events.
mxShape.prototype.setTransparentBackgroundImage = function(node)
Sets a transparent background CSS style to catch all events.
mxShape.prototype.releaseSvgGradients = function(grads)
Paints the line shape.
mxShape.prototype.destroy = function()
Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.
release: function(element)
Removes the known listeners from the given DOM node and its descendants.
Renders cells into a document object model.
Extends mxEventSource to implement a graph component for the browser.
Extends mxShape to implement an actor shape.
Extends mxShape to implement an cylinder shape.
Defines various global constants.
Defines the key for the fill color.
Defines the key for the gradient color.
Defines the key for the gradient direction.
Defines the key for the opacity style.
Defines the key for the strokeColor style.
Defines the key for the strokeWidth style.
Defines the key for the shadow style.
Defines the key for the dashed style.
Defines the key for the spacing.
Defines the key for the startSize style.
Defines the key for the endSize style.
Defines the key for the rounded style.
Defines the key for the start arrow marker.
Defines the key for the end arrow marker.
Defines the key for the rotation style.
Defines the key for the direction style.
Defines the key for the glass style.
Close